<template>
  <a-drawer :width="540" :height="760" :visible="visible" @ok="handleOk" @cancel="handleCancel" placement="top"
    unmountOnClose>
    <template #title>
      {{ curDevieInfo.device_name }}
    </template>

    <div v-if="visible">

      <a-row class="grid-demo" :gutter="24">

        <a-col :span="6">
          <div>
            <div class="pro_info">
              <a-space direction="vertical" size="large" fill>
                <a-descriptions title="基本设置信息" :column="1">
                  <!-- <a-descriptions-item v-for="item of producttions" :label="item.label"
                                            :span="item.span ?? 1">
                                            <a-tag>{{ item.value }}</a-tag>
                                        </a-descriptions-item> -->
                  <a-descriptions-item label="导航版本" :span="1">
                    <a-tag color="red">v1.1.0</a-tag>
                  </a-descriptions-item>
                  <a-descriptions-item label="机器人位置" :span="1">
                    <a-tag>{{ handelFormat(baseinfo.weizhi) }}</a-tag>

                  </a-descriptions-item>
                  <a-descriptions-item label="当前模式" :span="1">


                    <a-tag v-if="machine_nav_mode == 2">导航模式</a-tag>
                    <a-tag v-else-if="machine_nav_mode == 1">建图模式</a-tag>
                    <a-tag v-else-if="machine_nav_mode == 3">增量建图模式</a-tag>
                    <a-tag v-else> {{ baseinfo.dmode }}</a-tag>
                    <a-popover position="right" trigger="click">
                      <a-button status="danger" size="mini" style="margin-left:10px;">
                        <template #icon>
                          <icon-sync />
                        </template>
                        切换模式
                      </a-button>
                      <template #content>
                        <a-space direction="vertical" fill>
                          <div class="ma_item">
                            <div class="ma_item_left">模式</div>
                            <div class="ma_item_right">
                              <a-radio-group v-model="machine_nav_mode">
                                <a-radio value="1">建图模式</a-radio>
                                <a-radio value="2">导航模式</a-radio>
                                <a-radio value="3">增量建图模式</a-radio>
                              </a-radio-group>
                            </div>
                          </div>
                          <div class="ma_item">
                            <div class="ma_item_left">
                              <a-button type="primary" @click="machineSetMode(curDevieInfo)"
                                style="margin-left:30px;">切换</a-button>
                            </div>
                            <div class="ma_item_right">

                            </div>
                          </div>

                        </a-space>
                      </template>
                    </a-popover>
                  </a-descriptions-item>
                  <a-descriptions-item label="机器主机名" :span="1">
                    <a-tag color="orange">{{ curDevieInfo.device_num }}</a-tag>

                  </a-descriptions-item>

                  <a-descriptions-item label="IMU状态" :span="1">
                    <a-tag>正常</a-tag>

                  </a-descriptions-item>
                  <a-descriptions-item label="激光数据" :span="1">
                    <a-tag>正常</a-tag>

                  </a-descriptions-item>
                  <a-descriptions-item label="当前速度" :span="1">
                    <a-tag>线速度3m/s；角速度，50度/s</a-tag>

                  </a-descriptions-item>
                  <a-descriptions-item label="连接状态" :span="1">

                    <div v-if="isLine == 1"
                      style="height:40px;line-height:40px;display: flex;flex-direction: row;justify-content: conter;align-items: center;">
                      <div class="round-connect"></div>
                      <a-link status="success" style="margin-left:5px;font-size:12px;margin-top:10px;">已连接服务</a-link>
                    </div>
                    <div v-else>
                      <div class="round"></div>
                      <a-link status="danger" style="margin-left:5px;font-size:12px;margin-top:10px;">已断开服务</a-link>
                    </div>



                  </a-descriptions-item>
                </a-descriptions>

              </a-space>
            </div>
            <div class="hide-cursor">

              <h1 style="font-weight: 600;">获取电源管理状态</h1>
              <a-row class="grid-demo">
                <a-col :span="8">
                  <a-image width="100" :src="jqr" />
                </a-col>
                <a-col :span="5">
                  <ma-icon-line style="width:40px;height:40px;margin-top:30px;" />
                </a-col>
                <a-col :span="7">
                  <ma-icon-chargeval style="width:110px;height:110px;" />
                </a-col>
              </a-row>
              <a-row class="grid-demo">
                <a-col :span="8">
                  <div class="iconBOX">
                    <div> <ma-icon-liang style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">电量{{ baseinfo.battery }}%</div>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="iconBOX">
                    <div> <ma-icon-cdz style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:6px;">{{ baseinfo.charge }}</div>

                  </div>
                </a-col>
                <a-col :span="8">
                  <div class="iconBOX">
                    <div> <ma-icon-btn style="width:35px;height:35px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">按钮{{ baseinfo.emergencyButton }}</div>
                  </div>
                </a-col>
              </a-row>

              <a-row class="grid-demo">
                <a-col :span="24">

                </a-col>

              </a-row>

            </div>

          </div>
          <div>
            <h1 style="font-weight: 600;margin-bottom: 20px;">设置最低电量自动充电</h1>

            <a-space direction="vertical">

              <div>
                自动充电：
                <a-switch>
                  <template #checked>
                    开启
                  </template>
                  <template #unchecked>
                    关闭
                  </template>
                </a-switch>

              </div>
              <div>
                电量匝值：
                <a-slider :default-value="1" :style="{ width: '200px' }" show-input :max="100" :min="1"
                  :format-tooltip="formatter" />

              </div>

              <a-button type="primary">设置</a-button>

            </a-space>

          </div>
        </a-col>
        <a-col :span="12">

          <!-- <div>{{ currentMapInfo }}</div> -->
          <a-row class="grid-demo">

            <a-col :span="14">
              <h1 style="font-weight: 600;">当前地图--( <a-link status="warning">{{
                currentMapInfo.alias ? currentMapInfo.alias : currentMapInfo.name }}</a-link>)</h1>
            </a-col>
            <a-col :span="6">
              <h1 style="font-weight: 600;"><a-link status="danger">X:{{ mousePosition.x }}--Y:{{ mousePosition.y
              }}</a-link>
              </h1>
            </a-col>

            <a-col :span="4">
              <a-button type="text" @click="getCurrentInfo" status="danger">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>
                  <h1 style="font-weight: 600;">加载当前地图</h1>
                </template>
              </a-button>
            </a-col>
          </a-row>
          <a-row class="grid-demo" style="margin-bottom: 5px;">
            <a-col :span="24">
              <div>
                <a-space>

                  <a-button type="dashed" status="danger" size="mini" @click="machineCurrentPosition"> <template
                      #icon><icon-location /></template><template #default>当前位置</template> </a-button>
                  <a-button type="dashed" status="danger" size="mini" @click="originMapSize"> <template
                      #icon><icon-file-image /></template>
                    <template #default>重置缩放</template></a-button>
                  <a-button type="dashed" status="danger" size="mini" @click="navlineList(curDevieInfo)"> <template
                      #icon><icon-list /></template>
                    <template #default>标定列表</template></a-button>
                  <a-button type="dashed" status="warning" size="mini" @click="VirtualWall(curDevieInfo)"> <template
                      #icon><icon-thumb-up-fill /></template>
                    <template #default>虚拟墙</template></a-button>
                  <a-button type="dashed" status="danger" size="mini" @click="navStatus(curDevieInfo)"> <template
                      #icon><icon-live-broadcast /></template>
                    <template #default>巡航状态监控</template></a-button>
                  <a-button type="dashed" status="danger" @click="monkaibel(curDevieInfo)" size="mini">
                    <template #icon><icon-dashboard /></template>
                    <template #default>实时导航监控面板</template>
                  </a-button>
                </a-space>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-space class="flex-horiz flex-center">
                <div class="no">对齐方式：</div>
                <a-select style="width: 120px" v-model="alignMode" @change="onChange" :options="[
                  { label: '容器覆盖', value: 'cover' },
                  { label: '容器大小', value: 'contain' },
                  { label: '自动', value: 'auto' },
                ]" />
                <div class="ml-md">原图尺寸</div>
                <a-select :options="sizeOptions" v-model="size" @change="onChange" style="width: 200px" />
                <a-dropdown @select="handleSelect" :popup-max-height="false">
                  <a-button>巡航方案 <icon-down /></a-button>
                  <template #content>

                    <a-doption :value="item.id" v-for="item in CaseList">{{ item.case_name }}</a-doption>
                  </template>
                </a-dropdown>
                <a-alert type="success" style="font-size:12px;" v-if="currentDeviceCase">{{
                  currentDeviceCase.case_name }}</a-alert>
                <a-alert type="error" style="font-size:12px;" v-else>请选择巡航方案</a-alert>
                <!-- <a-tag checkable color="arcoblue" :default-checked="true"> {{
                  currentDeviceCase ? currentDeviceCase.case_name : '请选择巡航方案' }}</a-tag> -->
              </a-space>
              <v3-drag-zoom-container ref="dragRef" :align="alignMode" class="button">
                <div class="flex-column flex-same " style="cursor:move;background-color: darkred；"
                  :style="sizeOptions[size].size" @mousemove="handleMouseMove">
                  <ma-icon-position class="ma_position element" v-if="currentPosition.px > 0"
                    :style="{ 'top': (currentPosition.py - 12.5) + 'px', 'left': (currentPosition.px - 12.5) + 'px', 'z-index': 9999 }" />
                  <div v-for="item in state.dayRecory" v-if="state.dayRecory.length > 0" class="ma_position">
                    <!-- {{ item.web_pose }} -->
                    <div class="ma_position dbox" v-if="item.web_pose && item.type == 'normal'"
                      :style="{ 'top': (item.web_pose.y - 35) + 'px', 'left': (item.web_pose.x - 25) + 'px' }">{{
                        item.name
                      }}
                    </div>
                    <div class="ma_position dbox1 swing-animation" @click="viewWarnInfo(item, item.warn_point)"
                      v-if="item.web_pose && item.type == 'normal' && item.is_warn == 1"
                      :style="{ 'top': (item.web_pose.y - 57) + 'px', 'left': (item.web_pose.x - 25) + 'px' }">{{
                        warn_name
                      }}

                    </div>
                    <div class="yellow" v-if="item.web_pose && item.type == 'normal' && item.is_warn == 1"
                      :style="{ 'top': (item.web_pose.y + 15) + 'px', 'left': (item.web_pose.x - 10) + 'px' }">

                    </div>

                    <div class="ma_position dbox" v-if="item.web_pose && item.type == 'delivery'"
                      :style="{ 'top': (item.web_pose.y - 20) + 'px', 'left': (item.web_pose.x - 15) + 'px' }">{{
                        item.name
                      }}
                    </div>
                    <div class="ma_position dbox" v-if="item.web_pose && item.type == 'production'"
                      :style="{ 'top': (item.web_pose.y - 25) + 'px', 'left': (item.web_pose.x - 15) + 'px' }">{{
                        item.name
                      }}
                    </div>
                    <div class="ma_position dbox" v-if="item.web_pose && item.type == 'charge'"
                      :style="{ 'top': (item.web_pose.y - 25) + 'px', 'left': (item.web_pose.x - 15) + 'px' }">{{
                        item.name
                      }}
                    </div>
                    <ma-icon-abslute class="ma_position" v-if="item.web_pose && item.type == 'normal'"
                      :style="{ 'top': (item.web_pose.y - 12.5) + 'px', 'left': (item.web_pose.x - 12.5) + 'px' }" />
                    <ma-icon-paisong class="ma_position" v-if="item.web_pose && item.type == 'delivery'"
                      :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
                    <ma-icon-chukou class="ma_position" v-if="item.web_pose && item.type == 'production'"
                      :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
                    <ma-icon-cdz class="ma_position" v-if="item.web_pose && item.type == 'charge'"
                      :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
                  </div>

                  <img :src="currentMapInfo.image_url" v-if="currentMapInfo" @mousemove="handleMouseMove"
                    @dblclick.prevent="handleDblClick" />

                </div>
              </v3-drag-zoom-container>

            </a-col>


          </a-row>




          <!-- <v3-drag-zoom-container class="button1"  ref="dragroom"  :align ="cover" > -->
          <!-- <div style="border:1px solid red;width:377px;height:577px;" @mousemove="handleMouseMove">1111</div> -->

          <!-- <div
      class="flex-column flex-same"
      style="background-color: darkred; height: 400px; width: 1900px"
    >
      <div class="flex-grow flex-horiz flex-same" v-for="i in 10">
        <div class="border-box bca-border" v-for="i in 10"></div>
      </div>
    </div> -->


          <!-- <div class="img_container" > -->


          <!-- <ma-icon-position class="ma_position element" v-if="currentPosition.px>0"
                  :style="{ 'top': (currentPosition.py - 12.5) + 'px', 'left': (currentPosition.px - 12.5) + 'px' }" />
              <div v-for="item in state.dayRecory" v-if="state.dayRecory.length > 0" class="ma_position"> -->
          <!-- {{ item.web_pose }} -->
          <!-- <div class="ma_position dbox" v-if="item.web_pose && item.type == 'normal'"
                :style="{ 'top': (item.web_pose.y-35) + 'px', 'left': (item.web_pose.x-25) + 'px' }">{{ item.name }}</div>
                <div class="ma_position dbox" v-if="item.web_pose && item.type == 'delivery'"
                :style="{ 'top': (item.web_pose.y-20) + 'px', 'left': (item.web_pose.x-15) + 'px' }">{{ item.name }}</div>
                <div class="ma_position dbox" v-if="item.web_pose && item.type == 'production'"
                :style="{ 'top': (item.web_pose.y-25) + 'px', 'left': (item.web_pose.x-15) + 'px' }">{{ item.name }}</div>
                <div class="ma_position dbox" v-if="item.web_pose && item.type == 'charge'"
                :style="{ 'top': (item.web_pose.y-25) + 'px', 'left':  (item.web_pose.x-15) + 'px' }">{{ item.name }}</div>
                <ma-icon-abslute class="ma_position" v-if="item.web_pose && item.type == 'normal'"
                  :style="{ 'top': (item.web_pose.y - 12.5) + 'px', 'left': (item.web_pose.x - 12.5) + 'px' }" />
                <ma-icon-paisong class="ma_position" v-if="item.web_pose && item.type == 'delivery'"
                  :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
                <ma-icon-chukou class="ma_position" v-if="item.web_pose && item.type == 'production'"
                  :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
                <ma-icon-cdz class="ma_position" v-if="item.web_pose && item.type == 'charge'"
                  :style="{ 'top': item.web_pose.y + 'px', 'left': item.web_pose.x + 'px' }" />
              </div> -->


          <!-- <img :src="currentMapInfo.image_url" v-if="currentMapInfo"   @mousemove="handleMouseMove" @dblclick.prevent="handleDblClick" style="width:200px;height:577px;"/> -->

          <!-- </div> -->
          <!-- </v3-drag-zoom-container> -->


          <a-row class="grid-demo" :gutter="24">
            <a-col :span="12">
              <div>
                <a-scrollbar
                  style="height:250px;overflow: auto;background-color: #ccc;border-radius: 5px;padding:10px;">
                  <a-timeline :style="{ marginRight: '40px' }" :reverse="true">
                    <a-timeline-item :label="item.created_at" dotColor="#00B42A" v-for="item in orderList" :key="item">
                      操作：{{ item.name }}
                      <br />
                      <a-typography-text type="secondary" :style="{ fontSize: '12px', marginTop: '4px' }">
                        执行结果: <span v-if="item.isload == 1"> {{ item.order_result }} </span> <span
                          v-if="item.isload == 2"><a-spin dot /> 执行中...</span>
                      </a-typography-text>
                    </a-timeline-item>
                  </a-timeline>
                </a-scrollbar>

              </div>
            </a-col>
            <a-col :span="12">
              <div>
                <a-scrollbar
                  style="height:250px;overflow: auto;background-color: #ccc;border-radius: 5px;padding:10px;">
                  <a-timeline :style="{ marginRight: '40px' }" :reverse="false">
                    <a-timeline-item label="" dotColor="#00B42A" line-color="#00B42A" line-type="dotted">
                      <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">


                        <ma-icon-startp width="30" height="30" :style="{ marginRight: '16px', marginBottom: '12px' }" />
                        <div :style="{ marginBottom: '12px' }">
                          机器人开始导航
                          <div :style="{ fontSize: '12px', color: '#4E5969' }">
                            2025-03-07 10:10:06
                          </div>
                        </div>
                      </a-row>
                      <br />
                    </a-timeline-item>

                    <a-timeline-item label="2025-03-07 10:10:06" dotColor="#00B42A">

                      <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                        <ma-icon-linep width="30" height="30" :style="{ marginRight: '16px', marginBottom: '12px' }" />
                        <div :style="{ marginBottom: '12px' }">
                          现在到达A点 距离10米
                          <div :style="{ fontSize: '12px', color: '#4E5969' }">
                            2025-03-07 10:10:06
                          </div>
                        </div>
                      </a-row>
                    </a-timeline-item>
                    <a-timeline-item label="2025-03-07 10:10:06" dotColor="#00B42A">

                      <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                        <ma-icon-linep width="30" height="30" :style="{ marginRight: '16px', marginBottom: '12px' }" />
                        <div :style="{ marginBottom: '12px' }">
                          现在到达B点 距离10米
                          <div :style="{ fontSize: '12px', color: '#4E5969' }">
                            2025-03-07 10:10:06
                          </div>
                        </div>
                      </a-row>
                    </a-timeline-item>
                    <a-timeline-item label="2025-03-07 10:10:06" dotColor="#00B42A">

                      <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                        <ma-icon-linep width="30" height="30" :style="{ marginRight: '16px', marginBottom: '12px' }" />
                        <div :style="{ marginBottom: '12px' }">
                          现在到达C点 距离10米
                          <div :style="{ fontSize: '12px', color: '#4E5969' }">
                            2025-03-07 10:10:06
                          </div>
                        </div>
                      </a-row>
                    </a-timeline-item>

                    <a-timeline-item label="2025-03-07 10:10:06" dotColor="#00B42A">
                      <a-row :style="{ display: 'inline-flex', alignItems: 'center' }">
                        <ma-icon-endp width="30" height="30" :style="{ marginRight: '16px', marginBottom: '12px' }" />
                        <div :style="{ marginBottom: '12px' }">
                          机器人导航成功
                          <div :style="{ fontSize: '12px', color: '#4E5969' }">
                            2025-03-07 10:10:06
                          </div>
                        </div>
                      </a-row>
                    </a-timeline-item>
                  </a-timeline>
                </a-scrollbar>
              </div>
            </a-col>
          </a-row>

          <!-- <div v-chat-scroll="{smooth: true, notSmoothOnInit: true}"  style="background-color: #ccc;border-radius: 5px;padding:10px;height:200px;">
            <a-timeline :style="{ marginRight: '40px' }" :reverse="true">
              <a-timeline-item :label="item.created_at" dotColor="#00B42A" v-for="item in orderList" :key="item">
                操作：{{ item.name }}
                <br />
                <a-typography-text type="secondary" :style="{ fontSize: '12px', marginTop: '4px' }">
                  执行结果:{{ item.order_result }}
                </a-typography-text>
              </a-timeline-item>

            </a-timeline>
          </div> -->
        </a-col>
        <a-col :span="6">
          <div>
            <h1 style="font-weight: 600;">设置导航最大速度</h1>
            <a-space direction="vertical" size="small">
              <a-link style="font-size:12px;" status="warning">当前速度：线速度-0.5m/s 角速度-0.5度/s</a-link>
              <a-tooltip content="速度值范围为0.3至1.0m/s">
                <a-input-number placeholder="设置导航速度" mode="button" size="large" @change="setSpeedValue"
                  :default-value="0.3" :step="0.1" :precision="1" max=1 min=0.3 class="input-demo" />
              </a-tooltip>
              <!-- 移动指定距离 -->
              <!-- <h1 style="font-weight: 600;">机器人移动指定距离</h1> -->


            </a-space>
            <a-row class="grid-demo">
              <a-col :span="6">
                <div class="iconBOX" @click="startNav('startnav', curDevieInfo)">
                  <div> <ma-icon-feig class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">开始导航</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="startNav('repeatnav', curDevieInfo)">
                  <div> <ma-icon-position class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">重定位</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="startNav('absultnav', curDevieInfo)">
                  <div> <ma-icon-abslute class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">绝对重定位</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="startNav('navcharge', curDevieInfo)">
                  <div> <ma-icon-charger class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">导航充电</div>
                </div>
              </a-col>
            </a-row>
            <a-row class="grid-demo">
              <a-col :span="6">
                <div class="iconBOX" @click="findRecord(curDevieInfo)">
                  <div> <ma-icon-charge class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">巡航方案</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="machineRecord(curDevieInfo)">
                  <div> <ma-icon-Dlog class="element" style="width:35px;height:35px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">操作记录</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="handelMap(curDevieInfo)">
                  <div> <ma-icon-navmap class="element" style="width:35px;height:35px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">导航地图</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="navline(curDevieInfo)">
                  <div> <ma-icon-navline class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">导航路线</div>
                </div>
              </a-col>
              <a-col :span="6">
                <a-popover position="right" trigger="click">
                  <div class="iconBOX">
                    <div> <ma-icon-dingshen class="element" style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">顶升模块</div>
                  </div>
                  <template #content>
                    <a-space direction="vertical" fill>
                      <div class="ma_item">
                        <div class="ma_item_left">升降方向</div>
                        <div class="ma_item_right">
                          <a-radio-group v-model="machine_chargeup">
                            <a-radio value="up">上升</a-radio>
                            <a-radio value="down">下降</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">
                          <a-button type="primary" @click="machineMoudel(curDevieInfo)"
                            style="margin-left:30px;">执行</a-button>
                        </div>
                        <div class="ma_item_right">

                        </div>
                      </div>

                    </a-space>
                  </template>
                </a-popover>
              </a-col>

              <a-col :span="6">
                <a-popover position="right" trigger="click">
                  <div class="iconBOX">
                    <div> <ma-icon-jiaodu class="element" style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">转动指定角度</div>
                  </div>
                  <template #content>
                    <a-space direction="vertical" fill>

                      <div class="ma_item">
                        <div class="ma_item_left">转动角度(角度)</div>
                        <div class="ma_item_right">
                          <a-slider step="1" :default-value="1" :max="360" :min="1" :style="{ width: '300px' }"
                            show-input @change="getDegSetp" />
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">转动速度(弧度)</div>
                        <div class="ma_item_right">
                          <a-slider step="0.1" :default-value="0.3" :max="1" :min="0.3" :style="{ width: '300px' }"
                            show-input @change="getSpeedSetp" />
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">转动方向</div>
                        <div class="ma_item_right">
                          <a-radio-group direction="horizontal" v-model="degForm.direction" default-checked="0">
                            <a-radio value="0">左转</a-radio>
                            <a-radio value="1">右转</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">
                          <a-button type="primary" @click="machineSetReg(curDevieInfo)"
                            style="margin-left:30px;">执行转动</a-button>
                        </div>
                        <div class="ma_item_right">
                          <a-button type="primary" status="danger" @click="machineStopTurn(curDevieInfo)">
                            <!-- <template #icon>
                                <icon-record-stop size="15" />
                              </template> -->
                            <template #default>停止转动</template>
                          </a-button>
                        </div>
                      </div>
                    </a-space>
                  </template>
                </a-popover>
              </a-col>
              <a-col :span="6">
                <a-popover position="right" trigger="click">
                  <div class="iconBOX">
                    <div> <ma-icon-juli class="element" style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">指定距离移动</div>
                  </div>
                  <template #content>
                    <a-space direction="vertical" fill>
                      <div class="ma_item">
                        <div class="ma_item_left">移动方向</div>
                        <div class="ma_item_right">
                          <a-radio-group direction="horizontal" v-model="directionForm.direction" default-checked="0">
                            <a-radio value="0">后退</a-radio>
                            <a-radio value="1">前进</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">移动距离(cm)</div>
                        <div class="ma_item_right">
                          <a-slider step="1" :default-value="0.3" :max="1000" :min="100" :style="{ width: '300px' }"
                            show-input @change="getDistance" />
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">移动速度(m/s)</div>
                        <div class="ma_item_right">
                          <a-slider step="0.1" :default-value="0.3" :max="1" :min="0.3" :style="{ width: '300px' }"
                            show-input @change="getSpeed" />
                        </div>
                      </div>

                      <div class="ma_item">
                        <div class="ma_item_left">
                          <a-button type="primary" @click="machineHandelDistance(curDevieInfo)"
                            style="margin-left:30px;">执行移动</a-button>
                        </div>
                        <div class="ma_item_right">
                          <a-button type="primary" status="danger" @click="stopMachineHandelDistance(curDevieInfo)">
                            <!-- <template #icon>
                                <icon-record-stop size="15" />
                              </template> -->
                            <template #default>停止移动</template>
                          </a-button>
                        </div>
                      </div>

                    </a-space>
                  </template>
                </a-popover>
              </a-col>
              <a-col :span="6">
                <a-popover position="right" trigger="click">
                  <div class="iconBOX">
                    <div> <ma-icon-gongdian class="element" style="width:40px;height:40px;" /></div>
                    <div style="color:#333;font-size:12px;margin-top:5px;">对外供电</div>
                  </div>
                  <template #content>
                    <a-space direction="vertical" fill>
                      <div class="ma_item">
                        <div class="ma_item_left">对外供电</div>
                        <div class="ma_item_right">
                          <a-radio-group v-model="machine_lock">
                            <a-radio value="lock">打开供电</a-radio>
                            <a-radio value="unlock">关闭供电</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                      <div class="ma_item">
                        <div class="ma_item_left">
                          <a-button type="primary" @click="machineLock(curDevieInfo)"
                            style="margin-left:30px;">执行</a-button>
                        </div>
                        <div class="ma_item_right">

                        </div>
                      </div>

                    </a-space>
                  </template>
                </a-popover>
              </a-col>
            </a-row>
            <a-row class="grid-demo">
              <a-col :span="6">
                <div class="iconBOX" @click="VedioMonitor('startnav', curDevieInfo)">
                  <div> <ma-icon-shexiangtou class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">摄像监控</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="deviceImg('repeatnav', curDevieInfo)">
                  <div> <ma-icon-zhuapai class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">抓拍照片</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="iconBOX" @click="timeSetoutNav('absultnav', curDevieInfo)">
                  <div> <ma-icon-timeout class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">定时巡航</div>
                </div>
              </a-col>
              <a-col :span="6">

                <div class="iconBOX" @click="openDeviceWarn(curDevieInfo)">

                  <div> <ma-icon-warn class="element" style="width:40px;height:40px;" /></div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">设备预警</div>

                </div>
              </a-col>
            </a-row>



            <!-- 自定义的指令模块 -->

            <a-row class="grid-demo">
              <a-col :span="6" v-for="item in deviceOrderList" :key="item.id">

                <div class="iconBOX" @click="commonDeviceOrder(item, curDevieInfo)" v-if="item.status == 1">
                  <div> <a-image :preview="false"
                      :src="item.moudel_icon ? $tool.showFile(item.moudel_icon) : $url + 'avatar.jpg'"
                      style="object-fit: cover" width="40" /> </div>
                  <div style="color:#333;font-size:12px;margin-top:5px;">{{ item.moudel_name }}</div>
                </div>



              </a-col>

            </a-row>
          </div>
          <div>

            <h1 style="font-weight: 600;">导航操作机器人</h1>
            <div class="c-box">
              <div class="control-c">
                <div class="control-left">
                  <div class="cross-c">
                    <div class="cross-item" @click="turnArround(curDevieInfo, 'up')">
                      <div data-v-edfc5b8b="" class="arr arr-1"></div>
                    </div>
                    <div class="cross-item" @click="turnArround(curDevieInfo, 'right')">
                      <div data-v-edfc5b8b="" class="arr arr-2"></div>
                    </div>
                    <div class="cross-item" @click="turnArround(curDevieInfo, 'left')">
                      <div data-v-edfc5b8b="" class="arr arr-3"></div>
                    </div>
                    <div class="cross-item" @click="turnArround(curDevieInfo, 'down')">
                      <div data-v-edfc5b8b="" class="arr arr-4"></div>
                    </div>
                  </div>
                  <!-- <icon-pause-circle /> -->
                  <!-- <div class="center-btn"></div> -->
                  <a-button shape="round" status="danger" class="center-btn"
                    @click="stopMove(curDevieInfo)">停止</a-button>
                </div>
              </div>

            </div>

            <!-- <circle-box style="margin-top:30px;margin-left:30px;"></circle-box> -->
            <!-- <a-image
    width="100"
    :src="jqr"
  /> -->
          </div>
        </a-col>
      </a-row>
    </div>

  </a-drawer>
  <!-- 开始导航 -->
  <a-drawer :width="640" :height="340" :visible="bvisible" placement="left" @ok="handleOkb" @cancel="handleCancelb"
    unmountOnClose>
    <template #title>
      开始导航
    </template>
    <div>
      <a-row class="grid-demo">
        <a-col :span="10">
          <div>
            <h1>导航位置信息</h1>
          </div>
        </a-col>
        <a-col :span="4" :offset="10">
          <div>
            <a-dropdown @select="handleSelect" :popup-max-height="false">
              <a-button>巡航方案 <icon-down /></a-button>
              <template #content>
                <a-doption :value="item.id" v-for="item in CaseList">{{ item.case_name }}</a-doption>
              </template>
            </a-dropdown>
          </div>
        </a-col>
      </a-row>


      <Steps v-if="state.dayRecory.length > 0" :data="state.dayRecory" :Index="5"
        :current_position="current_position" />
      <a-empty v-else>
        <template #image>
          <ma-icon-abslute style="width:40px;height:40px;" />
          <icon-location style="color:red" />
        </template>
        请先设置导航路线
      </a-empty>

      <h1 style="margin-bottom:10px;">导航运维操作</h1>
      <!-- 开始导航 -->
      <a-space direction="vertical" fill style="margin-top:20px;" v-if="setname == 'startnav'">
        <!-- <ma-position v-model="startPosition" text="选择起点" :multiple="false" :isEcho="true" :deviceNum="curDevieInfo.device_num"/> -->

        <div>
          <a-row class="grid-demo">
            <a-col :span="15">
              <div> <ma-position v-model="endPosition" :onlyId="false" text="选择导航点位" :multiple="false" :isEcho="true"
                  :deviceNum="curDevieInfo.device_num" :case_id="caseForm.case_id" />
              </div>
            </a-col>
            <a-col :span="9">
              <div>
                <a-space>
                  <a-button type="primary" @click="handelStartNav(curDevieInfo)">开始导航</a-button>
                  <a-button status="danger" @click="machineChanel(curDevieInfo)">取消导航</a-button>
                </a-space>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-space>

      <a-space direction="vertical" fill style="margin-top:20px;" v-if="setname == 'repeatnav'">
        <a-row class="grid-demo">
          <a-col :span="12">
            <div><ma-position v-model="endPosition" text="选择位点" :onlyId="false" :multiple="false" :isEcho="true"
                :deviceNum="curDevieInfo.device_num" :case_id="caseForm.case_id" /></div>
          </a-col>
          <a-col :span="12">
            <div> <a-button type="primary" @click="positionHandel(curDevieInfo)"
                style="margin-left:30px;">重定位</a-button>
            </div>
          </a-col>
        </a-row>


        <div>
        </div>
      </a-space>
      <a-space direction="vertical" fill style="margin-top:20px;" v-if="setname == 'absultnav'">
        <a-row class="grid-demo">
          <a-col :span="12">
            <div> <ma-position v-model="endPosition" text="选择位点" :onlyId="false" :multiple="false" :isEcho="true"
                :deviceNum="curDevieInfo.device_num" :case_id="caseForm.case_id" /></div>
          </a-col>
          <a-col :span="12">
            <div> <a-button type="primary" @click="absloteHandel(curDevieInfo)"
                style="margin-left:30px;">绝对重定位</a-button>
            </div>
          </a-col>
        </a-row>


        <div>
        </div>
      </a-space>


      <a-space direction="vertical" fill v-if="setname == 'navcharge'">
        <ma-position v-model="endPosition" text="选择充电庄" :onlyId="false" :multiple="false" :isEcho="true"
          :deviceNum="curDevieInfo.device_num" :case_id="caseForm.case_id" />

        <a-radio-group direction="horizontal" v-model="isNavChangre" default-checked="0">
          <a-radio value="0">直接对接充电桩</a-radio>
          <a-radio value="1">取消对接充电桩</a-radio>
          <a-radio value="2">导航到充电桩位置
            并开始对接充电桩</a-radio>
        </a-radio-group>
        <a-button type="primary" @click="machineNavHandel(curDevieInfo)" style="margin-left:30px;">充电</a-button>
      </a-space>



      <a-row class="grid-demo" :gutter="24">
        <a-col :span="12">
          <h1 style="margin-top:20px;margin-bottom: 10px;">操作实时监控</h1>
          <a-scrollbar style="height:150px;overflow: auto;background-color: #ccc;border-radius: 5px;padding:10px;">
            <a-timeline :style="{ marginRight: '40px' }" :reverse="true">
              <a-timeline-item :label="item.created_at" dotColor="#00B42A" v-for="item in orderList" :key="item">
                操作：{{ item.name }}
                <br />
                <a-typography-text type="secondary" :style="{ fontSize: '12px', marginTop: '4px' }">
                  执行结果: <span v-if="item.isload == 1"> {{ item.order_result }} </span> <span
                    v-if="item.isload == 2"><a-spin dot /> 执行中...</span>
                </a-typography-text>
              </a-timeline-item>

            </a-timeline>
          </a-scrollbar>
        </a-col>
        <a-col :span="12">
          <h1 style="margin-top:20px;margin-bottom: 10px;">导航实时监控</h1>
          <a-scrollbar style="height:150px;overflow: auto;background-color: #ccc;border-radius: 5px;padding:10px;">
            <a-timeline :style="{ marginRight: '40px' }" :reverse="true">
              <a-timeline-item :label="item.created_at" dotColor="#00B42A" v-for="item in orderList" :key="item">
                操作：{{ item.name }}
                <br />
                <a-typography-text type="secondary" :style="{ fontSize: '12px', marginTop: '4px' }">
                  执行结果: <span v-if="item.isload == 1"> {{ item.order_result }} </span> <span
                    v-if="item.isload == 2"><a-spin dot /> 执行中...</span>
                </a-typography-text>
              </a-timeline-item>

            </a-timeline>
          </a-scrollbar>
        </a-col>
      </a-row>



    </div>
  </a-drawer>
  <!-- 标注点 -->
  <a-drawer :width="380" :visible="svisible" @before-ok="beforeOk" @ok="shandleOk" @cancel="shandleCancel"
    unmountOnClose :mask="false" placement="left">
    <template #title>
      标记点位
    </template>
    <a-space direction="vertical" fill>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>地图位置：</div>
        </a-col>
        <a-col :span="17">
          <div><a-tag color="red">{{ mousePosition }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>机器位置：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="red">{{ mapPosition }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>点位名称：</div>
        </a-col>
        <a-col :span="17">
          <div>
            <a-input placeholder="请输入位置名称" allow-clear v-model="caseForm.name" />
          </div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>点位类型：</div>
        </a-col>
        <a-col :span="17">
          <div>
            <a-select placeholder="选择点位类型" v-model="caseForm.type">
              <a-option value="normal">路线点</a-option>
              <a-option value="delivery">配送点</a-option>
              <a-option value="production">出品点</a-option>
              <a-option value="charge">充电桩</a-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>巡航方案：</div>
        </a-col>
        <a-col :span="17">
          <div>
            <a-select placeholder="选择巡航方案">
              <a-option :value="item.id" v-for="item in CaseList">{{ item.case_name }}</a-option>
            </a-select>
          </div>
        </a-col>
      </a-row>

    </a-space>
  </a-drawer>
  <!-- 定时巡航 -->
  <a-drawer :width="380" :visible="tvisible" @before-ok="beforetOk" @ok="thandleOk" @cancel="thandleCancel"
    unmountOnClose :mask="true" placement="left" ok-text="开始定时巡航">
    <template #title>
      定时巡航
    </template>
    <a-space direction="vertical" fill>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>当前地图</div>
        </a-col>
        <a-col :span="17">
          <div><a-tag color="red">{{
            currentMapInfo.alias ? currentMapInfo.alias : currentMapInfo.name }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>巡航方案：</div>
        </a-col>
        <a-col :span="17">
          <div>
            <a-select placeholder="选择巡航方案" @change="handleSelect2">
              <a-option :value="item.id" v-for="item in CaseList">{{ item.case_name }}</a-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>预警点为：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="red">{{ warnPointInfo ? warnPointInfo.name + '（值为：' + warnPointInfo.warn_point + ')' :
            '未设定'
          }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>开始日期：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="green">{{ currentDeviceCase ? currentDeviceCase.start_date : '未设定' }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>结束日期：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="red">{{ currentDeviceCase ? currentDeviceCase.end_date : '未设定' }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>开始时间：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="green">{{ currentDeviceCase ? currentDeviceCase.start_time : '未设定' }}</a-tag></div>
        </a-col>
      </a-row>

      <a-row class="grid-demo">
        <a-col :span="7">
          <div>结束时间：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="red">{{ currentDeviceCase ? currentDeviceCase.end_time : '未设定' }}</a-tag></div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div>导航状态：</div>
        </a-col>
        <a-col :span="17">
          <div> <a-tag color="green" v-if="currentDeviceCase && currentDeviceCase.status">执行中.....</a-tag>
            <a-tag color="red">停止中.....</a-tag>
          </div>
        </a-col>
      </a-row>
      <a-row class="grid-demo">
        <a-col :span="7">
          <div></div>
        </a-col>
        <a-col :span="17">
          <div>
            <a-button status="danger" @click="machineChanel(curDevieInfo)">取消导航到预警点</a-button>
          </div>
        </a-col>
      </a-row>
    </a-space>
  </a-drawer>
  <!-- 摄像监控 -->
  <a-drawer :width="540" :visible="SXvisible" placement="left" @ok="SXhandleOk" @cancel="SXhandleCancel" unmountOnClose>
    <template #title>
      设备信息
    </template>
    <a-row class="grid-demo">
      <a-col :span="24">
        <div class="bind-container">
          <div class="bind-box" v-for="item in deviceBindList" @key="item">
            <div class="bind-box-item">
              <a-image width="100" style="border-radius: 10px;" height="100"
                :src="item.device_pic ? $tool.showFile(item.device_pic) : $url + 'avatar.jpg'" />
            </div>

            <a-space direction="vertical">
              <div class="bind-name">设备名称：

                <a-tag checkable color="red">{{ item.device_name }}</a-tag>
              </div>
              <div class="bind-name">设备类型：

                <a-tag color="orangered" bordered style="font-size:12px;"> {{ dictTypeData[item.device_type] }}</a-tag>
              </div>
              <div class="bind-name">设备编码：
                <a-tag color="red" nowrap="true" style="width:100px;">
                  <a-typography-paragraph style="font-size:12px;margin-top:10px;" :ellipsis="{
                    rows: 1,
                    showTooltip: true,
                  }">
                    {{ item.device_num }}
                  </a-typography-paragraph>

                </a-tag>
                <!-- <a-link status="danger" style="font-size:12px;font-weight: bold;"> {{ item.device_num }}</a-link> -->
              </div>
              <div class="bind-name" v-if="item.device_type < 3">
                <ma-icon-jk style="width:40px;height:40px;cursor: pointer;" @click="openCama(item)" />
              </div>

            </a-space>

          </div>

        </div>
      </a-col>

    </a-row>
    <div>
    </div>
  </a-drawer>
  <!-- 打开视频流 -->
  <a-modal width="auto" v-model:visible="vedio_visible" @ok="vedio_handleOk" @cancel="vedio_handleCancel" draggable>
    <template #title>
      {{ currentBindDevice ? currentBindDevice.device_name : "" }}-({{ currentBindDevice ? currentBindDevice.device_num
        : "" }})
    </template>


    <ma-video :src="video_url" width="100%" v-if="video_url"></ma-video>

    <!-- <video width="320" height="240" controls preload="auto">
      <source src="http://111.61.228.51:83/openUrl/KSrZ9V6/live.m3u8" type="application/x-mpegURL">
      Your browser does not support the video tag.
    </video>
    -->
    <div>


    </div>
  </a-modal>
  <!-- 预警点信息 -->
  <a-drawer placement="left" :width="540" :visible="warn_visible" @ok="warn_handleOk" @cancel="warn_handleCancel"
    unmountOnClose>
    <template #title>
      预警点信息
    </template>
    <div>
      <h1 style="font-weight: 600;">预警点位置信息</h1>
      <a-space direction="vertical" size="large" fill>
        <a-descriptions title=" " :column="1">
          <!-- <a-descriptions-item v-for="item of producttions" :label="item.label"
                                            :span="item.span ?? 1">
                                            <a-tag>{{ item.value }}</a-tag>
                                        </a-descriptions-item> -->
          <a-descriptions-item label="位置名称" :span="1">
            <a-tag color="red">{{ warnPointInfoView.name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="位置坐标" :span="1">
            <a-tag>{{ warnPointInfoView.web_pose }}</a-tag>

          </a-descriptions-item>

          <a-descriptions-item label="机器坐标" :span="1">
            <a-tag color="orange">{{ warnPointInfoView.pose }}</a-tag>

          </a-descriptions-item>

        </a-descriptions>

      </a-space>
      <h1 style="font-weight: 600;">报警信息
        <!-- {{ warnInfo.value }} -->
      </h1>
      <a-space direction="vertical" size="large" fill>
        <a-descriptions title=" " :column="2">
          <!-- <a-descriptions-item v-for="item of producttions" :label="item.label"
                                            :span="item.span ?? 1">
                                            <a-tag>{{ item.value }}</a-tag>
                                        </a-descriptions-item> -->
          <a-descriptions-item label="设备编码" :span="1">
            <a-tag color="red">{{ warnInfo.value.device_code }}</a-tag>
          </a-descriptions-item>
          <!-- <a-descriptions-item label="设备名称" :span="1">
            <a-tag>{{ warnInfo.device_name }}</a-tag>

          </a-descriptions-item> -->

          <a-descriptions-item label="报警类型" :span="1">
            <a-tag color="orange">{{ warnInfo.value.warn_type }}</a-tag>

          </a-descriptions-item>
          <a-descriptions-item label="报警时间" :span="1">
            <a-tag color="orange">{{ tool.dateFormat(warnInfo.value.warn_time) }}</a-tag>

          </a-descriptions-item>
          <a-descriptions-item label="防区编号1" :span="1">
            <a-tag color="red">{{ warnInfo.value.defence_one }}</a-tag>

          </a-descriptions-item>
          <a-descriptions-item label="防区编号2" :span="1">
            <a-tag color="red">{{ warnInfo.value.defence_two }}</a-tag>

          </a-descriptions-item>

          <a-descriptions-item label="警情信息1" :span="1">
            <a-tag color="orange">{{ warnInfo.value.defence_one_msg }}</a-tag>

          </a-descriptions-item>

          <a-descriptions-item label="警情信息2" :span="1">
            <a-tag color="orange">{{ warnInfo.value.defence_two_msg }}</a-tag>

          </a-descriptions-item>
          <a-descriptions-item label="接警时间" :span="1">
            <a-tag color="blue">{{ tool.dateFormat(warnInfo.value.receive_warn_time) }}</a-tag>

          </a-descriptions-item>
          <a-descriptions-item label="报警状态" :span="1">


            <div style="display: flex;justify-content: flex-start;">
              <div class="round"></div>
              <a-link status="danger" style="margin-left:5px;font-size:12px;margin-top:10px;">报警中</a-link>
            </div>



          </a-descriptions-item>
        </a-descriptions>

      </a-space>
      <h1 style="font-weight: 600;">抓拍照片信息</h1>
      <a-space>
        <a-image width="100"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" />
        <a-image width="100"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" />
        <a-image width="100"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" />
        <a-image width="100"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp" />

      </a-space>


      <h1 style="font-weight: 600;">查看监控</h1>

      <a-row class="grid-demo">
        <a-col :span="24">
          <div class="bind-container">
            <div v-for="item in deviceBindList" @key="item" class="deviceitems">
              <div class="bind-box2" v-if="item.device_type < 3">
                <div class="bind-box-item">
                  <a-image width="40" style="border-radius: 10px;" height="40"
                    :src="item.device_pic ? $tool.showFile(item.device_pic) : $url + 'avatar.jpg'" />
                </div>
                <div class="bind-item2">
                  <a-space direction="vertical" v-if="item.device_type < 3">
                    <div class="bind-name">
                      <a-tag checkable color="red">{{ item.device_name }}</a-tag>
                    </div>
                    <div class="bind-name">
                      <ma-icon-jk style="width:20px;height:20px;cursor: pointer;" @click="openCama(item)" />
                    </div>
                  </a-space>

                </div>

              </div>

            </div>

          </div>
        </a-col>

      </a-row>
    </div>
  </a-drawer>
  <device-position-home ref="devicePositionHomeRef" :client="client" :case_id="caseForm.case_id" :isDelete="isDelete" />
  <device-log-home ref="deviceLogHomeRef" :client="client" />
  <device-map-home ref="deviceMapHomeRef" :client="client" :isSuccess="isSuccess" @mapNameSet="mapNameHandel" />
  <device-case-home ref="deviceCaseHomeRef" :client="client" />
  <device-nav-home ref="deviceNavHomeRef" :client="client" :case_id="caseForm.case_id" :isDelete="isDelete" />
  <device-warn-home ref="deviceWarnHomeRef" :client="client" :case_id="caseForm.case_id" :isDelete="isDelete" />
  <device-img-home ref="deviceImgHomeRef" :client="client" :case_id="caseForm.case_id" :isDelete="isDelete" />

</template>

<script setup>
import { dict } from '@/api/system/dict'
import { ref, reactive, onMounted, onUnmounted, watch, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import DeviceMap from '@/views/system/deviceMap/index.vue'
import { V3DragZoomContainer } from "v3-drag-zoom";
import jqr from '@/assets/jiqiren.png'
import circleBox from '@/views/components/ma-circle/index.vue'
import Steps from '@/views/components/ma-steps/index.vue'
import DevicePositionHome from '@/views/system/devicePosition/home.vue'
import DeviceLogHome from '@/views/system/deviceLog/home.vue'
import systemDevicePosition from '@/api/system/systemDevicePosition'
import commonApi from '@/api/common'
import tool from '@/utils/tool'
import systemDeviceLog from '@/api/system/systemDeviceLog'
import systemDeviceMap from '@/api/system/systemDeviceMap'
import DeviceMapHome from '@/views/system/deviceMap/home.vue'
import DeviceCaseHome from '@/views/system/deviceCase/home.vue'
import DeviceNavHome from '@/views/system/deviceNav/home.vue'
import DeviceWarnHome from '@/views/system/deviceWarn/home.vue'
import DeviceImgHome from '@/views/system/deviceImg/home.vue'
import systemDeviceCase from '@/api/system/systemDeviceCase';
import systemDeviceBind from '@/api/system/systemDeviceBind'
import MaVideo from '@/views/components/ma-video/index.vue'
import systemDeviceOrder from '@/api/system/systemDeviceOrder'
const dragRef = ref();
const alignMode = ref("auto");

const sizeOptions = reactive([
  { label: "0x0", value: 0, size: { width: "0px", height: "0px" } },
])
const size = ref(0);
const onChange = () => {
  setTimeout(() => {
    dragRef.value.reset();
  });
};

const visible = ref(false)
const bvisible = ref(false)
const svisible = ref(false)
const tvisible = ref(false)
const SXvisible = ref(false)
const vedio_visible = ref(false)
const warn_visible = ref(false)
const dictTypeData = ref([])
const endPosition = ref()
const isLine = ref(0)
const curDevieInfo = ref(false)
const setname = ref()
const postionList = ref()
const isNavChangre = ref(null)
// const props = defineProps(["client"])
const client = ref();
const topic = ref();
const devicePositionHomeRef = ref()
const deviceNavHomeRef = ref()
const deviceWarnHomeRef = ref()
const deviceImgHomeRef = ref()
const deviceLogHomeRef = ref()
const deviceCaseHomeRef = ref()
const deviceMapHomeRef = ref();
const machine_chargeup = ref()
const video_url = ref(null)
const machine_lock = ref()
const mousePosition = reactive({ x: 0, y: 0 })
const mapPosition = reactive({ x: 0, y: 0, theta: 0.56 })
const currentPosition = reactive({ px: 0, py: 0 })
const navCollect = ref([])
const machine_nav_mode = ref(false)
const current_position = ref()
const CaseList = ref()
const isSuccess = ref(0)  //地图是否更新成功
const isDelete = ref(0)  //地图是否更新成功
const currentDeviceCase = ref()
const currentCaseInfo = ref()
const warnPointInfo = ref(null) //预警点信息
const deviceBindList = ref([])//摄像设备数据
const currentBindDevice = ref(null)
const warnPointPositon = ref([]) //预警点联动
const warn_name = ref(null)
const warnArr = ref([])
const deviceOrderList = ref([])
const moudelOrderList = ref([])
const navListData = reactive([
  { "res": 6, "reason": 0, "goal": "A", "dist": 0, "mileage": 0 },
  { "res": 1, "reason": 0, "goal": "A", "dist": 0.5, "mileage": 0 },
  { "res": 3, "reason": 0, "goal": "A", "dist": 0, "mileage": 0.6 },
  { "res": 4, "reason": 0, "goal": "A", "dist": 0, "mileage": 0.6 }
])
const warnInfo = reactive({
  warn_type: "",
  warn_time: "",
  device_code: "",
  device_name: "",
  dept_id: "",
  defence_two: "",
  defence_one: "",
  defence_one_msg: "",
  defence_two_msg: "",
  receive_warn_time: "",



})
const warnPointInfoView = ref(null)
const form = reactive({
  name: ""
})
const baseinfo = reactive(
  {

    "weizhi": "",
    "battery": 0,
    "dmode": "",
    "emergencyButton": "",
    "charge": "未充电"
  }
) //基本信息
//处理地图名称
const mapNameHandel = (map_name) => {
  console.log(map_name)
  form.name = map_name

}
const caseForm = reactive({
  case_id: 0,
  type: "",
  device_num: "",
  name: "",
  pose: "",
  web_pose: "",
  map_name: ""
})
const orderList = ref([{
  name: "向左转动",
  order_name: "",
  order_result: "机器人向左转动成功",
  device_num: "",
  created_at: "2025-01-06 09:36",
  message_id: "123456",
  remark: "",
  isload: 1
}
])


const originMapSize = () => {
  setTimeout(() => {
    dragRef.value.reset();

  });
};
const orderResult = reactive({
  name: "",
  order_name: "",
  order_result: "",
  device_num: ""

})
const defaultDay = reactive({
  dayRecory: [
    {
      id: 7204928,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: null,
      createTime: "大同路",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-01-04",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-01-05",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 0
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 1
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    },
    {
      id: 7204929,
      name: "暂无位置",
      smallClass: "UpdateOutBoundAgingPlanning",
      bigClass: "SCFXD",
      createTime: "2024-03-01",
      createUser: "Mia",
      outBoundAgingPlanningId: 1342,
      status: 2
    }
  ],
})
const state = reactive({
  dayRecory: []
});

const degForm = reactive({
  angle: 0,
  direction: 0,
  speed: 0.3
})

const directionForm = reactive({
  distance: 0,
  direction: 0,
  speed: 0.3

})
const currentMapInfo = reactive({

  name: "",
  alias: "",
  width: "",
  height: "",
  origin_x: 0,
  origin_y: 0,
  image_url: "",

})
const formatter = (value) => {
  return `${Math.round((value / 100) * 100)}%`
};
const deviceLogList = ref([])
const connection = reactive({
  clientId: "machine_yxb" + curDevieInfo.value.device_num + Math.random().toString(16).substring(2, 8),
  username: "admin",
  password: "bl@2199110",
  clean: true,
  connectTimeout: 30 * 1000, // ms
  reconnectPeriod: 4000, // ms
});
const open = (row) => {
  console.log(row)
  visible.value = true
  curDevieInfo.value = row
  topic.value = "PERSONDEVICE/" + row.device_num

  loadDeviceOrder()
  getDeviceLogList(row.device_num)
  //获取机器人基本信息

  setTimeout(() => {
    Message.loading("正在连接机器人设备中。。。")
    Message.loading("正在加载当前地图中。。。")
    let loadCurrentMapInfo = tool.local.get(row.device_num + ":current_map")
    console.log(loadCurrentMapInfo)
    if (loadCurrentMapInfo) {
      currentMapInfo.name = loadCurrentMapInfo.mapName.name
      currentMapInfo.alias = loadCurrentMapInfo.mapName.alias
      currentMapInfo.width = loadCurrentMapInfo.width
      currentMapInfo.height = loadCurrentMapInfo.height
      currentMapInfo.image_url = loadCurrentMapInfo.image_url
      currentMapInfo.origin_x = loadCurrentMapInfo.origin_x
      currentMapInfo.origin_y = loadCurrentMapInfo.origin_y
      caseForm.map_name = loadCurrentMapInfo.mapName.name

      sizeOptions[0].label = `${loadCurrentMapInfo.width}*${loadCurrentMapInfo.height}`,
        sizeOptions[0].size = {
          width: loadCurrentMapInfo.width + "px",
          height: loadCurrentMapInfo.height + "px"
        }
      console.log(sizeOptions)
      getDeviceCaseList()

      // setTimeout(() => {
      //   dragroom.value.zoom(0.84);
      // }, 2000);

    }
    mqttServe()
    getMachineInfo()
  }, 1000)

}

//公用模块指令
const commonDeviceOrder = (orderItem, deviceInfo) => {
  console.log(orderItem);
  if(!orderItem.order_code){
     Message.error("该模块指令不存在")
     return false
  }
  let obj = {}
  let remark=""
  //开始组合指令
  if(orderItem.order_params){
    let orderParms = orderItem.order_params.split("\r\n")
  console.log(orderParms)
    obj = orderParms.reduce((acc, curr) => {
    const [key, value] = curr.split(':');
    acc[key] = value;
    return acc;
  }, {});
  console.log(obj); // 输出：{ order: '1', x: '123', y: '234' }
  }
  if(orderItem.order_name){
    let orderName = orderItem.order_code.split("@")
    remark = orderName[1]+'_'+orderName[2]

  }

  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: orderItem.order_code, params:obj, message_id: message_id, remark: remark }), orderItem.order_name, remark, message_id)
  client.value.publish(topic.value, JSON.stringify({ order: orderItem.order_code, params:obj, message_id: message_id, remark: remark }));
}

//加载指令模块数据
const loadDeviceOrder = () => {
  systemDeviceOrder.getList({ device_id: curDevieInfo.value.id }).then(res => {
    console.log(res)
    deviceOrderList.value = res.data.items

    res.data.items.forEach((item)=>{
      console.log(item)
    moudelOrderList.value.push(item.order_code)
    })
    console.log(moudelOrderList.value)
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })

}

//获取巡航方案时间展示
const getCaseTime = (value) => {

  console.log(value)

  CaseList.value.forEach((item) => {
    if (item.id == value) {
      currentCaseInfo.value = item
      console.log(currentCaseInfo.value)
    }
  })

}
const handleMouseMove = (event) => {
  // 获取图片元素
  const img = event.target;
  // 获取鼠标在屏幕上的位置
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  // 获取图片左上角相对于视口的位置
  const imgRect = img.getBoundingClientRect();
  const offsetX = mouseX - imgRect.left;
  const offsetY = mouseY - imgRect.top;

  // 获取图片的缩放比例（基于宽度，高度同理）
  //const scale = img.offsetWidth / img.naturalWidth;

  // console.log(img.offsetWidth)

  // 计算相对于图片左上角的坐标（考虑缩放）
  //const relativeX = offsetX / scale;
  //const relativeY = offsetY / scale;
  // let px = relativeX.toFixed(2)
  // let py = relativeY.toFixed(2)

  let px = offsetX.toFixed(2)
  let py = offsetY.toFixed(2)
  // diffMapMath(px,py)
  // let origin_x = -20.15
  // let origin_y = -11.3376
  // let px = (x - origin_x)*20
  // let py = (y - origin_y) *20
  mousePosition.x = px;
  mousePosition.y = py;
}

const handelFormat = (str) => {
  if (str) {
    let res = str.split(',')
    console.log(res)
    return res[0].substring(0, 7) + ',' + res[1].substring(0, 7) + ',' + res[2].substring(0, 7)

  }

}
//转换地图算法

const diffMapMath = (px, py, origin_x, origin_y, height) => {
  console.log(px, py, origin_x, origin_y, height)
  let x = (px / 20) + origin_x
  let y = (height - py) / 20 + origin_y
  mapPosition.x = parseFloat(x.toFixed(5));
  mapPosition.y = parseFloat(y.toFixed(5));
  console.log(x, y);
  caseForm.pose = JSON.stringify(mapPosition)
}

//当前位置算法
const currentDiffMapMath = (x, y, origin_x, origin_y, height) => {
  console.log(x, y, origin_x, origin_y, height)
  let px = (x - origin_x) * 20
  let py = (y - origin_y) * 20
  py = height - py
  currentPosition.px = parseFloat(px.toFixed(5));
  currentPosition.py = parseFloat(py.toFixed(5));
  console.log(px, py);
  // caseForm.pose = JSON.stringify(mapPosition)
}

//地图管理
const handelMap = (record) => {
  // curDevieInfo.value = record
  deviceMapHomeRef.value.open(record)
  // topic.value = "PERSONDEVICE/" + record.device_num
}
/*  加载操作记录  */
const getDeviceLogList = (device_num) => {
  commonApi.getDeviceLogList({ pageSize: 30, page: 1, device_num: device_num, orderBy: "id", orderType: "desc" }).then(res => {

    if (res.data.items.length > 0) {
      orderList.value = res.data.items
    } else {
      orderList.value = [{
        name: "向左转动",
        order_name: "",
        order_result: "机器人向左转动成功",
        device_num: "",
        created_at: "2025-01-06 09:36",
        message_id: "123456",
        remark: "",
        isload: 1
      }]

    }

    console.log(orderList.value)
    res.success && Message.success("加载机器人操作日志成功")
  }).catch(e => { console.log(e) })

}



/*  查看操作记录  */
const findRecord = (row) => {
  deviceCaseHomeRef.value.open(row)
}
/*  查看操作记录  */
const machineRecord = (row) => {
  deviceLogHomeRef.value.open(row)
}
const mqttServe = () => {
  // 建立连接
  // 注意此出的网址开头要使用ws:而不是tcp:
  client.value = mqtt.connect("ws://118.190.86.170:8083/mqtt", connection);
  client.value.on('connect', () => {
    isLine.value = 1
    console.log(curDevieInfo.value.device_num + '连接成功');
    Message.success("机器人主机为" + curDevieInfo.value.device_name + "连接成功");
  });

  // 订阅主题
  client.value.subscribe("PERSONDEVICES/" + curDevieInfo.value.device_num, (topic) => {
    console.log(topic);  // 此处打印出订阅的主题名称
  });
  // 订阅主题
  client.value.subscribe("Alarm/364/#", (topic) => {
    console.log(topic);  // 此处打印出订阅的主题名称
  });

  // //接受消息
  client.value.on("message", (topic, data) => {
    console.log(topic);  // 此处打印出订阅的主题名称
    // 这里有可能拿到的数据格式是Uint8Array格式，所以可以直接用toString转成字符串
    let machine_host;
    if (topic.includes("PERSONDEVICES")) {
      machine_host = topic.split("/")
      console.log(machine_host)
      let dataArr = JSON.parse(data.toString());

      if (dataArr.code == 200) {
        if (dataArr.order == "machine@get@baseinfo") {
          console.log(dataArr)
          // Message.success(data.toString());
          handelOrder(dataArr.message_id, dataArr.remark)
          Object.assign(baseinfo, dataArr.data)
          Message.success(`机器人基础信息获取成功`);
        } else if (dataArr.order == "machine@get@chargeinfo") {
          Message.success(data.toString());
        } else if (dataArr.order == "machine@current@map") {
          console.log(dataArr)
          handelOrder(dataArr.message_id, dataArr.remark)

          tool.local.set(curDevieInfo.value.device_num + ":current_map", dataArr.data)
          //获取当前地图信息
          setTimeout(() => {
            currentMapInfo.width = dataArr.data.width
            currentMapInfo.height = dataArr.data.height
            currentMapInfo.image_url = dataArr.data.image_url
            currentMapInfo.origin_x = dataArr.data.origin_x
            currentMapInfo.origin_y = dataArr.data.origin_y
            currentMapInfo.name = dataArr.data.mapName.name
            currentMapInfo.alias = dataArr.data.mapName.alias
            caseForm.map_name = dataArr.data.mapName.name
            console.log(currentMapInfo)
            //加载位置数据
            sizeOptions[0].label = `${dataArr.data.width}*${dataArr.data.height}`,
              sizeOptions[0].size = {
                width: dataArr.data.width + "px",
                height: dataArr.data.height + "px"
              }
            console.log(sizeOptions)
            getDeviceCaseList()
          }, 2000)

          Message.success("机器人当前地图设置成功");
        } else if (dataArr.order == "machine@setSpeed") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器人最大速度设置成功");
        } else if (dataArr.order == "machine@reeman@position") {
          loadMachinePosition(dataArr.waypoints)
          Message.success("加载机器人位置信息成功");
        } else if (dataArr.order == "machine@nav@charge") {

          handelOrder(dataArr.message_id, dataArr.remark)

          Message.success("机器人导航充电设置成功");
        } else if (dataArr.order == "machine@position") {
          handelOrder(dataArr.message_id, dataArr.remark)
          current_position.value = dataArr.data
          Message.success("机器人重定位成功");
        } else if (dataArr.order == "machine@absolute@position") {
          handelOrder(dataArr.message_id, dataArr.remark)
          current_position.value = dataArr.data
          Message.success("机器人绝对重定位成功");
        } else if (dataArr.order == "machine@cancel@nav") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器人取消导航成功");
        } else if (dataArr.order == "machine@cmd@move") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器人移动指定距离成功");
        } else if (dataArr.order == "machine@handel@up") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器人操作成功");
        } else if (dataArr.order == "machine@handel@stop") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器人停止操作成功");
        } else if (dataArr.order == "machine@cmd@hydraulic_up") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器顶升电机上升操作成功");
        } else if (dataArr.order == "machine@cmd@hydraulic_down") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("机器顶升电机下降操作成功");

        } else if (dataArr.order == "machine@cmd@set_mode") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("设置导航模式成功");

        } else if (dataArr.order == "machine@map@list") {
          handelOrder(dataArr.message_id, dataArr.remark)
          saveDeviceMapData(dataArr.data.maps)
          Message.success("加载地图列表成功");
        } else if (dataArr.order == "machine@reeman@pose") {
          handelOrder(dataArr.message_id, dataArr.remark)
          current_position.value = dataArr.data
          currentDiffMapMath(dataArr.data.x, dataArr.data.y, currentMapInfo.origin_x, currentMapInfo.origin_y, currentMapInfo.height)
          Message.success("获取当前机器人的位置信息成功");
        } else if (dataArr.order == "machine@cmd@lock") {
          handelOrder(dataArr.message_id, dataArr.remark)

          Message.success("机器人打开对外供电成功");
        } else if (dataArr.order == "machine@cmd@unlock") {
          handelOrder(dataArr.message_id, dataArr.remark)

          Message.success("机器人关闭对外供电成功");
        } else if (dataArr.order == "machine@map@rename") {
          handelOrder(dataArr.message_id, dataArr.remark)
          updateMapAlias(dataArr.map_name)
          Message.success("地图重命名成功");
        } else if (dataArr.order == "machine@set@position") {
          handelOrder(dataArr.message_id, dataArr.remark)
          saveDevicePosition()
          Message.success("设置地图标注点成功");
        } else if (dataArr.order == "machine@map@selected") {
          handelOrder(dataArr.message_id, dataArr.remark)
          selectedMap(dataArr.map_name)
          Message.success("应用地图成功");
        } else if (dataArr.order == "machine@cmd@delete_position") {
          handelOrder(dataArr.message_id, dataArr.remark)
          // selectedMap(dataArr.map_name)
          deletePositionQuest(dataArr.data.pname)
          Message.success("删除标注点成功");
        } else if (dataArr.order == "machine@map@delmap") {
          handelOrder(dataArr.message_id, dataArr.remark)
          // selectedMap(dataArr.map_name)
          deleteMapQuest(dataArr.data.map_name)
          Message.success("删除地图成功");
        } else if (dataArr.order == "machine@cmd@fixed_time") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("设置定时巡航成功");
        } else if (dataArr.order == "machine@position@warn") {
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("预警点报警发送成功");
        } else if(moudelOrderList.includes(dataArr.order)){
          handelOrder(dataArr.message_id, dataArr.remark)
          Message.success("预警点报警发送成功");

        }


      } else {
        Message.error(dataArr.message);
      }
    } else if (topic.includes("Alarm")) {
      // 1-1740016429-000001--364-09-09-盗警-盗警-1740016429--
      if (!data) {
        Message.error("没有报警信息")
        return false;
      }
      let alarmObj = data.toString().split("-");
      console.log(alarmObj)
      //找到报警点
      if (alarmObj[5]) {
        systemDevicePosition.readPosition({ device_num: alarmObj[2], warn_point: alarmObj[5] }).then(res => {
          console.log(res)
          if (res.code == 200) {
            // warnPointPositon.value = res.data
            warn_name.value = alarmObj[7]
            let warmItem = {
              warn_type: alarmObj[0],
              warn_time: alarmObj[1],
              device_code: alarmObj[2],
              dept_id: alarmObj[4],
              defence_two: alarmObj[5],
              defence_one: alarmObj[6],
              defence_one_msg: alarmObj[7],
              defence_two_msg: alarmObj[8],
              receive_warn_time: alarmObj[9]


            }
            // warnInfo.warn_type = alarmObj[0]
            // warnInfo.warn_time = alarmObj[1]
            // warnInfo.device_code = alarmObj[2]
            // warnInfo.dept_id = alarmObj[4]
            // warnInfo.defence_two = alarmObj[5]
            // warnInfo.defence_one = alarmObj[6]
            // warnInfo.defence_one_msg = alarmObj[7]
            // warnInfo.defence_two_msg = alarmObj[8]
            // warnInfo.receive_warn_time = alarmObj[9]

            handelWarnRepeat(warmItem)
            handelPositionRepeat(res.data)
            //发送预警命令到预警点
            position_warn_send(res.data)
          } else {
            // Message.error("报警信息未联动预警点")
          }
        }).catch(e => { console.log(e) })



      }

    }

    // console.log(data.toString());

  });

  // //重连
  client.value.on("reconnect", (error) => {
    console.log(error)
    console.log("机器人主机为" + curDevieInfo.value.device_num + "正在重连:", error);
    Message.error("机器人主机为" + curDevieInfo.value.device_name + "正在重连");
  });

  // //错误回调
  client.value.on("error", (error) => {
    console.log(error)
    console.log("MQTT连接已关闭");
    // Message.error(curDevieInfo.value.device_name+"连接错误");
  });
}
// watch(curDevieInfo,(Value)=>{
//   console.log('curDevieInfo发生了变化',Value);

//   },{deep:true,immediate:true})

onMounted(() => {


});
onUnmounted(() => {

})

/* 过滤重复预警信息 */
const handelWarnRepeat = (warmItem) => {
  console.log(warmItem)
  if (warnArr.value.length > 0) {
    warnArr.value.forEach((item) => {
      console.log(item)
      if (item.device_code == warmItem.device_code) {
        console.log("存在报警器设备预警信息" + warmItem.device_code)
      } else {
        warnArr.value.push(warmItem)
      }
    })
  } else {
    console.log(warnArr.value)
    warnArr.value.push(warmItem)
  }
  console.log(warnArr.value)
}
//处理重复的预警位置
// const handelPositionRepeat = (warnPosi) => {
//   console.log(warnPosi)
//   if (warnPointPositon.value.length > 0) {
//     warnPointPositon.value.forEach((item) => {
//       console.log(item)
//       if (item.id == warnPosi.id) {
//         console.log("存在预警点位置信息" + warnPosi.id)
//       } else {
//         warnPointPositon.value.push(warnPosi)
//       }
//     })
//   } else {
//     console.log(warnPointPositon.value)
//     warnPointPositon.value.push(warnPosi)
//   }
//   console.log(warnPointPositon.value)
// }

//返回预警信息
const returnWarnInfo = (warn_point) => {


  if (warnArr.value.length > 0) {
    warnArr.value.forEach((item) => {
      console.log(item)
      if (item.defence_one == warn_point) {
        console.log("存在报警器设备预警信息" + item.defence_one)
        warnInfo.value = item
        console.log(warnInfo.value)

      } else {
        return null
      }
    })


  }


}

const handelPositionRepeat = (warnPosi) => {
  console.log(warnPosi)
  if (state.dayRecory.length > 0) {
    state.dayRecory.forEach((item, index) => {
      console.log(item)
      if (item.id == warnPosi.id) {
        console.log("存在预警点位置信息" + warnPosi.id)
        state.dayRecory[index].is_warn = 1
      }
    })
  }
}


// const isWarnPoint = computed((posi_id) => {
//   if (warnPointPositon.value.length > 0) {
//     warnPointPositon.value.forEach((item) => {
//       console.log(item)
//       if (item.id == posi_id) {
//         console.log("当前位置"+item.id)
//         return true
//       }
//     })
//   }
//   return false
// }) 


const generateUniqueKey = () => {
  let key = 'key_';
  const time = Date.now().toString(36);
  const random = Math.random().toString(36).substr(2, 9);
  return key + time + random;
}
// 显示操作信息
const loadOrderResult = (order_name, name, remark, message_id) => {

  let orderArr = {
    name: name,
    order_name: order_name,
    created_at: tool.dateFormat(new Date),
    device_num: curDevieInfo.value.device_num,
    message_id: message_id,
    remark: remark,
    order_result: "",
    isload: 2
  }

  console.log(orderArr)
  orderList.value.push(orderArr);

  //入库操作
  systemDeviceLog.save(orderArr).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })



}

//处理显示结果的方法
const handelOrder = (message_id, remark = "") => {

  orderList.value.forEach((item, key) => {
    if (item.message_id == message_id) {
      if (remark == "up") {
        orderList.value[key].order_result = "机器人向前移动成功"
        orderList.value[key].isload = 1
        //入库操作
        updateResult(message_id, "机器人向前移动成功")
      } else if (remark == "left") {
        orderList.value[key].order_result = "机器人向左转动成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人向左转动成功")
      } else if (remark == "right") {
        orderList.value[key].order_result = "机器人向右转动成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人向右转动成功")
      } else if (remark == "down") {
        orderList.value[key].order_result = "机器人向后退成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人向后退成功")
      } else if (remark == "stop") {
        orderList.value[key].order_result = "机器人停止成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人停止成功")
      } else if (remark == "max_speed") {
        orderList.value[key].order_result = "机器人设置导航最大速度成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人设置导航最大速度成功")
      } else if (remark == "distance") {
        console.log(remark)
        orderList.value[key].order_result = "机器人移动指定距离成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人移动指定距离成功")
      } else if (remark == "stopDistance") {
        console.log(remark)
        orderList.value[key].order_result = "机器人停止移动指定距离成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人停止移动指定距离成功")
      } else if (remark == "angle") {
        console.log(remark)
        orderList.value[key].order_result = "机器人转动指定角度成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人转动指定角度成功")
      } else if (remark == "stopAngle") {
        console.log(remark)
        orderList.value[key].order_result = "机器人停止转动指定角度成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人停止转动指定角度成功")
      } else if (remark == "hydraulic_up") {
        orderList.value[key].order_result = "机器人升空电机上升成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人升空电机上升成功")

      } else if (remark == "hydraulic_down") {
        orderList.value[key].order_result = "机器人升空电机下降成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人升空电机下降成功")

      } else if (remark == "set_mode") {
        orderList.value[key].order_result = "切换导航模式成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "切换导航模式成功")

      } else if (remark == "pose") {
        orderList.value[key].order_result = "获取当前机器人的位置信息成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "获取当前机器人的位置信息成功")

      } else if (remark == "position") {
        orderList.value[key].order_result = "设置机器人重定位成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "设置机器人重定位成功")

      } else if (remark == "absolute") {
        orderList.value[key].order_result = "设置机器人绝对重定位成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "设置机器人绝对重定位成功")

      } else if (remark == "cancel_goal") {
        orderList.value[key].order_result = "机器人取消导航成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人取消导航成功")
      } else if (remark == "lock") {
        orderList.value[key].order_result = "机器人对外打开供电成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人对外打开供电成功")
      } else if (remark == "unlock") {
        orderList.value[key].order_result = "机器人对外关闭供电成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "机器人对外关闭供电成功")
      } else if (remark == "current_map") {
        orderList.value[key].order_result = "加载当前地图成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "加载当前地图成功")
      } else if (remark == "map_rename") {
        orderList.value[key].order_result = "地图重命名成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "地图重命名成功")
      } else if (remark == "set_position") {
        orderList.value[key].order_result = "设置地图标注点成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "设置地图标注点成功")
      } else if (remark == "mapSelected") {
        orderList.value[key].order_result = "应用地图成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "应用地图成功")
      } else if (remark == "delete_position") {
        orderList.value[key].order_result = "删除标注点成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "删除标注点成功")
      } else if (remark == "baseinfo") {
        orderList.value[key].order_result = "获取机器人基本信息成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "获取机器人基本信息成功")
      } else if (remark == "fixed_time") {
        orderList.value[key].order_result = "设置定时巡航成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "设置定时巡航成功")
      } else if (remark == "position_warn") {
        orderList.value[key].order_result = "预警点报警发送成功"
        orderList.value[key].isload = 1
        updateResult(message_id, "预警点报警发送成功")
      }


    }
  })

  console.log(orderList.value)
}

const updateResult = (message_id, message) => {
  systemDeviceLog.updateBy({ message_id: message_id, order_result: message, isload: 1 }).then(res => {
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })

}


/*  定时巡航  */
const controTime = () => {
  // if (!currentMapInfo.name) {
  //   Message.warning("请加载当前地图，再继续操作")
  //   return false
  // }
  // if (caseForm.case_id == 0) {
  //   Message.warning("请选择巡航方案")
  //   return false
  // }

  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@cmd@fixed_time", params: { "case": currentDeviceCase.value, "position": navCollect.value }, message_id: message_id, remark: "fixed_time" }), "设置定时巡航", "fixed_time", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@fixed_time", params: { "case": currentDeviceCase.value, "position": navCollect.value }, message_id: message_id, remark: "fixed_time" }));


}

//删除位置库
const deletePositionQuest = (pname) => {
  systemDevicePosition.deleteByName({ pname: pname }).then(res => {
    isDelete.value = 1
    res.success && Message.success("删除标注点成功")
  }).catch(e => { console.log(e) })
}
//删除地图库
const deleteMapQuest = (map_name) => {
  systemDeviceMap.deleteByName({ map_name: map_name }).then(res => {
    isSuccess.value = 1
    res.success && Message.success("删除地图成功")
  }).catch(e => { console.log(e) })
}

//加载标注位置
const loadMachinePosition = (posiList) => {
  let plistData = [];
  if (posiList) {
    posiList.forEach(element => {
      let item = {
        name: element.name,
        type: element.type,
        pose: JSON.stringify(element.pose),
        device_num: curDevieInfo.value.device_num
      }
      plistData.push(item);
    });
    let postDataform = {
      device_num: curDevieInfo.value.device_num,
      collects: plistData

    }
    console.log(postDataform);
    //保存位置信息入库
    systemDevicePosition.saveAll(postDataform)
  }
}
//应用更新地图
const selectedMap = (map_name) => {
  systemDeviceMap.setCurrentMap({ map_name: map_name, is_current: 1 }).then(res => {
    isSuccess.value = 1
    res.success && Message.success("当前地图设置成功")
  }).catch(e => { console.log(e) })
}

//更新地图别名
const updateMapAlias = (map_name) => {
  systemDeviceMap.setCurrentMap({ map_name: map_name, alias: form.name }).then(res => {
    isSuccess.value = 1
    res.success && Message.success("地图命名成功")
  }).catch(e => { console.log(e) })
}

//执行地图数据的入库
const saveDeviceMapData = (mapList = []) => {
  let maplistData = [];
  if (mapList) {
    mapList.forEach(element => {
      let item = {
        map_name: element.name,
        alias: element.alias,
        width: element.map.width,
        height: element.map.height,
        resolution: element.map.resolution,
        origin_x: element.map.origin_x,
        origin_y: element.map.origin_y,
        image_url: element.map.image_url,
        device_num: curDevieInfo.value.device_num
      }
      maplistData.push(item);
    });
    let postDataform = {
      device_num: curDevieInfo.value.device_num,
      collects: maplistData

    }
    console.log(postDataform);
    // maplistData.forEach(item => {
    systemDeviceMap.saveAll(postDataform).then(res => {
      res.success && Message.success("地图入库成功")
    }).catch(e => { console.log(e) })
    // });
  }
}

/* 切换模式 */
const machineSetMode = (record) => {

  if (!machine_nav_mode.value) {
    Message.warning("请选择模式")
    return false
  }
  // if(machine_nav_mode.value==1){
  //   machine_nav_mode
  // }else if(machine_nav_mode.value==2){

  // }else if(machine_nav_mode.value==3){

  // }
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@cmd@set_mode", params: { "mode": machine_nav_mode.value }, message_id: message_id, remark: "set_mode" }), "设置导航模式", "set_mode", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@set_mode", params: { "mode": machine_nav_mode.value }, message_id: message_id, remark: "set_mode" }));


}
/* 开始导航 */
const startNav = (name, curDevieInfo) => {
  if (!currentMapInfo.name) {
    Message.warning("请加载当前地图，再继续操作")
    return false
  }
  if (caseForm.case_id == 0) {
    Message.warning("请选择巡航方案")
    return false
  }
  setname.value = name
  bvisible.value = true
  machineCurrentPosition()
  getDeviceCaseList()
  // getPositionList(curDevieInfo)
}
const getPositionList = (curDevieInfo, case_id = 0, type = "") => {

  commonApi.getPositionList({ device_num: curDevieInfo.device_num, pageSize: 800, case_id: case_id, type: type }).then(res => {
    if (res.success && res.data.items.length > 0) {
      let dataCollect = res.data.items
      dataCollect.forEach((item) => {
        if (item.web_pose) {
          item.web_pose = JSON.parse(item.web_pose)
        }
        if (item.warn_point) {
          warnPointInfo.value = item
        }
      })
      console.log(dataCollect)
      console.log(warnPointInfo.value)
      navCollect.value = dataCollect
      state.dayRecory = dataCollect
    } else {
      state.dayRecory = defaultDay.dayRecory
    }
    console.log(state.dayRecory);
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}
/* 机器人设置最大速度 */
const setSpeedValue = (value) => {
  Message.loading("正在设置中...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@setSpeed", params: { "speed": value }, remark: "max_speed", message_id: message_id }), "设置导航时最大速度", "max_speed", message_id)
  console.log(value)
  // 推送消息
  client.value.publish(topic.value, JSON.stringify({ order: "machine@setSpeed", params: { "speed": value }, remark: "max_speed", message_id: message_id }));
}
/* 机器人定位 */
const positionHandel = (record) => {

  console.log(endPosition.value);
  if (!endPosition.value) {
    Message.warning("请选择导航目标")
    return false;
  }
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@position", params: JSON.parse(endPosition.value[0].pose), remark: "position", message_id: message_id }), "设置机器人重定位", "position", message_id)
  console.log(record)
  Message.loading("正在定位中...")
  // 推送消息
  client.value.publish(topic.value, JSON.stringify({ order: "machine@position", params: JSON.parse(endPosition.value[0].pose), message_id: message_id, remark: "position" }));
}

/* 预警点发送 */
const position_warn_send = (warn_point) => {

  Message.loading("预警点报警...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@position@warn", params: warn_point, remark: "position_warn", message_id: message_id }), "预警点报警发送成功", "position_warn", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@position@warn", params: warn_point, message_id: message_id, remark: "position_warn" }));

}


/* 机器人绝对定位 */
const absloteHandel = (record) => {
  console.log(endPosition.value);
  if (!endPosition.value) {

    Message.warning("请选择导航目标")
    return false;
  }
  Message.loading("正在绝对定位中...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@absolute@position", params: JSON.parse(endPosition.value[0].pose), remark: "absolute", message_id: message_id }), "设置机器人绝对重定位", "absolute", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@absolute@position", params: JSON.parse(endPosition.value[0].pose), message_id: message_id, remark: "absolute" }));
  // systemDevice.absoluteHandel({ device_num: record.device_num }).then(res => {
  //res.success && Message.success(res.message)
  // }).catch(e => { console.log(e) })
}

/* 机器人获取导航路线 */
const navline = (row) => {
  if (!currentMapInfo.name) {
    Message.warning("请加载当前地图，再继续操作")
    return false
  }
  if (caseForm.case_id == 0) {
    Message.warning("请选择巡航方案")
    return false
  }
  devicePositionHomeRef.value.open(row)

}
/* 机器人获取导航路线 */
const navlineList = (row) => {

  if (!currentMapInfo.name) {
    Message.warning("请加载当前地图，再继续操作")
    return false
  }
  if (caseForm.case_id == 0) {
    Message.warning("请选择巡航方案")
    return false
  }
  devicePositionHomeRef.value.open(row)

}
/* 导航状态监控 */
const navStatus = (row) => {

  if (!currentMapInfo.name) {
    Message.warning("请加载当前地图，再继续操作")
    return false
  }
  // if (caseForm.case_id == 0) {
  //   Message.warning("请选择巡航方案")
  //   return false
  // }
  deviceNavHomeRef.value.open(row)

}
/* 打开设备预警 */
const openDeviceWarn = (row) => {

  deviceWarnHomeRef.value.open(row)

}

/* 打开设备抓拍 */
const deviceImg = (row) => {

  deviceImgHomeRef.value.open(row)

}

/* 打开设备预警 */
const timeSetoutNav = (row) => {
  if (!currentMapInfo.name) {
    Message.warning("请加载当前地图，再继续操作")
    return false
  }

  tvisible.value = true

}


/* 虚拟墙 */
const VirtualWall = (row) => {

  Message.warning("待开发中")

}
/* 摄像监控 */
const VedioMonitor = (row) => {

  SXvisible.value = true
  Message.loading("加载监控设备和报警设备")
  dict.getDict("device_type").then(res => {
    console.log(res)

    if (res.data && res.data.length > 0) {
      res.data.forEach((item) => {
        dictTypeData.value[item.key] = item.title
      })

      console.log(dictTypeData.value)

    }


  }).catch(e => { console.log(e) })


  //加载摄像设备监控数据
  systemDeviceBind.getList({ device_id: row.id }).then(res => {
    console.log(res)
    deviceBindList.value = res.data.items
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })



}

/* 机器人导航充电 */
const machineNavHandel = (record) => {

  console.log(endPosition.value);
  if (!endPosition.value) {
    Message.warning("请选择充电桩")
    return false;
  }
  if (!isNavChangre.value) {
    Message.warning("请选择操作")
    return false;
  }
  console.log(isNavChangre.value)
  let postParams
  if (isNavChangre.value == 0) {
    Message.loading("机器人直接对接充电桩...")
    postParams = { "type": 0, "point": endPosition.value[0].name }

  } else if (isNavChangre.value == 1) {
    Message.loading("机器人取消对接充电桩...")
    postParams = { "type": 1, "point": endPosition.value[0].name }
  } else if (isNavChangre.value == 2) {
    Message.loading("机器人导航到充电桩位置并开始对接充电桩...")
    postParams = { "type": 1, "point": endPosition.value[0].name }
  }
  let message_id = generateUniqueKey();

  loadOrderResult(JSON.stringify({ order: "machine@nav@charge", params: postParams, message_id: message_id, remark: "charge" }), "机器人取消导航", "cancel_goal", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@nav@charge", params: postParams, message_id: message_id, remark: "charge" }));
}



/* 机器人巡航记录 */
const machineNavrecord = (record) => {

  // Message.loading("机器人取消导航导航中...")
  // client.value.publish(topic.value, JSON.stringify({ order: "machine@cancel@nav" }));
}
/* 机器人执行导航 */

const handelStartNav = () => {
  console.log(endPosition.value);
  if (!endPosition.value) {

    Message.warning("请选择导航目标")
    return false;
  }
  Message.loading("机器人开始导航导航中...")

  client.value.publish(topic.value, JSON.stringify({ order: "machine@start@handelnav", params: { "point": endPosition.value[0].name } }));

}
/* 机器人取消导航 */
const machineChanel = (record) => {

  if (!warnPointInfo.value) {
    Message.warning("当前路线没有预警点请设置")
    return false;
  }

  Message.loading("机器人取消导航导航中...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@cancel@nav", params: { warn_point: warnPointInfo.value }, message_id: message_id, remark: "cancel_goal" }), "机器人取消导航", "cancel_goal", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cancel@nav", params: { warn_point: warnPointInfo.value }, message_id: message_id, remark: "cancel_goal" }));
}
/* 机器人顶升模块 */
const machineMoudel = (record) => {

  if (!machine_chargeup.value) {
    Message.warning("请选择升降选项")
    return false
  }
  Message.loading("机器人顶升电机降价中...")
  if (machine_chargeup.value == 'up') {
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@cmd@hydraulic_up", message_id: message_id, remark: "hydraulic_up" }), "机器控制顶升电机", "hydraulic_up", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@hydraulic_up", message_id: message_id, remark: "hydraulic_up" }));
  } else {
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@cmd@hydraulic_down", message_id: message_id, remark: "hydraulic_down" }), "机器控制顶升电机", "hydraulic_down", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@hydraulic_down", message_id: message_id, remark: "hydraulic_down" }));
  }
}

/* 机器人对外供电模块 */
const machineLock = (record) => {

  if (!machine_lock.value) {
    Message.warning("请选择供电选项")
    return false
  }
  Message.loading("机器人对外供电操控中...")
  if (machine_lock.value == 'lock') {
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@cmd@lock", message_id: message_id, remark: "lock" }), "机器人对外打开供电", "lock", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@lock", message_id: message_id, remark: "lock" }));
  } else {
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@cmd@unlock", message_id: message_id, remark: "unlock" }), "机器人对外关闭供电", "unlock", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@unlock", message_id: message_id, remark: "unlock" }));
  }
}



const getDegSetp = (value) => {

  console.log(value)

  degForm.angle = value;
}

const getSpeedSetp = (value) => {

  console.log(value)
  degForm.speed = value;
}
//
const getSpeed = (value) => {

  console.log(value)
  directionForm.speed = value;
}
const getDistance = (value) => {

  console.log(value)
  directionForm.distance = value;
}


//恢复原来地图大小
// const originMapSize = ()=>{

//   let loadCurrentMapInfo = tool.local.get(curDevieInfo.value.device_num + ":current_map")
//   currentMapInfo.width = loadCurrentMapInfo.width
//   currentMapInfo.height = loadCurrentMapInfo.height

//   console.log(currentMapInfo)

// }


//获取机器人的当前位置
const machineCurrentPosition = () => {
  if (caseForm.case_id == 0) {
    Message.warning("请选择巡航方案")
    return false
  }
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@reeman@pose", remark: "pose", message_id: message_id, remark: "pose" }), "获取机器人的当前位置", "pose", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@reeman@pose", message_id: message_id, remark: "pose" }));
  // setTimeout(() => {
  //    Message.loading("加载当前位置中...")
  // }, 2000);
}

/* 机器人移动指定距离 */
const machineHandelDistance = (record) => {
  if (!directionForm.direction) {
    Message.warning("请设置移动方向")
    return false;
  }
  if (!directionForm.distance) {
    Message.warning("请设置距离")
    return false;
  }
  if (!directionForm.speed) {
    Message.warning("请设置角速度")
    return false;
  }
  Message.loading("机器人移动中...")
  let message_id = generateUniqueKey();
  console.log(directionForm)
  loadOrderResult(JSON.stringify({ order: "machine@cmd@move", params: directionForm, remark: "distance", message_id: message_id }), "机器人移动指定距离", "distance", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@move", params: directionForm, remark: "distance", message_id: message_id }));
}

/* 机器人停止移动指定距离 */
const stopMachineHandelDistance = (record) => {

  Message.loading("机器人停止移动中...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@cmd@move", params: { "distance": 0, "direction": 1, "speed": 0 }, remark: "stopDistance", message_id: message_id }), "机器人移动指定距离", "distance", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@move", params: { "distance": 0, "direction": 1, "speed": 0 }, remark: "stopDistance", message_id: message_id }));
}

/* 机器人转动角度 */
const machineSetReg = (record) => {
  if (!degForm.angle) {
    Message.warning("请设置角度")
    return false;
  }
  if (!degForm.speed) {
    Message.warning("请设置角速度")
    return false;
  }
  if (!degForm.direction) {
    Message.warning("请设置转动方向")
    return false;
  }
  Message.loading("机器人转动角度...")
  console.log(degForm)
  let message_id = generateUniqueKey();
  console.log(directionForm)
  loadOrderResult(JSON.stringify({ order: "machine@cmd@turn", params: degForm, remark: "angle", message_id: message_id }), "机器人转动指定角度", "angle", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@turn", params: degForm, remark: "angle", message_id: message_id }));
}
/* 机器人停止转动角度 */
const machineStopTurn = (record) => {

  Message.loading("停止转动机器人..")
  let message_id = generateUniqueKey();
  console.log(directionForm)
  loadOrderResult(JSON.stringify({ order: "machine@cmd@turn", params: { "angle": 0, "direction": 1, "speed": 0 }, remark: "stopAngle", message_id: message_id }), "机器人停止转动指定角度", "stopAngle", message_id)

  client.value.publish(topic.value, JSON.stringify({ order: "machine@cmd@turn", params: { "angle": 0, "direction": 1, "speed": 0 }, remark: "stopAngle", message_id: message_id }));
}

/* 控制机器人 */
const turnArround = (record, direction) => {
  if (direction == 'up') {
    Message.loading("机器人前进中...")
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@handel@up", params: { "vx": 0.4, "vth": 0 }, remark: "up", message_id: message_id }), "机器人前进", "up", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@handel@up", params: { "vx": 0.4, "vth": 0 }, remark: "up", message_id: message_id }));
  } else if (direction == 'right') {
    Message.loading("机器人向右转弯前进中...")
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@handel@up", params: { "vx": 0, "vth": -0.5 }, remark: "right", message_id: message_id }), "机器人右转弯", "right", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@handel@up", params: { "vx": 0, "vth": -0.5 }, remark: "right", message_id: message_id }));

  } else if (direction == 'left') {
    Message.loading("机器人向左转弯前进中...")
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@handel@up", params: { "vx": 0, "vth": 0.5 }, remark: "left", message_id: message_id }), "机器人向左转弯", "left", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@handel@up", params: { "vx": 0, "vth": 0.5 }, remark: "left", message_id: message_id }));

  } else if (direction == 'down') {
    Message.loading("机器人后退中...")
    let message_id = generateUniqueKey();
    loadOrderResult(JSON.stringify({ order: "machine@handel@up", params: { "vx": -0.4, "vth": 0 }, remark: "down", message_id: message_id }), "机器人后退", "down", message_id)
    client.value.publish(topic.value, JSON.stringify({ order: "machine@handel@up", params: { "vx": -0.4, "vth": 0 }, remark: "down", message_id: message_id }));
  }

}
const stopMove = (record) => {
  Message.loading("机器人停止中...")
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@handel@stop", params: { "vx": 0, "vth": 0 }, remark: "stop", message_id: message_id }), "机器人停止", "stop", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@handel@stop", params: { "vx": 0, "vth": 0 }, remark: "stop", message_id: message_id }));
}
//设备操作
const handelDevice = (record) => {
  curDevieInfo.value = record
  topic.value = "PERSONDEVICE/" + record.device_num
  dvisible.value = true;
  //获取机器人基本信息
  getMachineInfo()
  //获取当前地图信息
  // getCurrentInfo()

}
const getMachineInfo = () => {
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@get@baseinfo", remark: "baseinfo", message_id: message_id }), "加载基本信息", "baseinfo", message_id)
  client.value.publish(topic.value, JSON.stringify({ order: "machine@get@baseinfo", remark: "baseinfo", message_id: message_id }));
}

//获取巡航方案
const getDeviceCaseList = () => {
  commonApi.getDeviceCaseList({ device_num: curDevieInfo.value.deviceNum, map_name: currentMapInfo.name }).then(res => {
    CaseList.value = res.data
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })



}

//加载当前地图
const getCurrentInfo = () => {
  // if (!currentMapInfo.name) {
  //   Message.warning("请加载当前地图，再继续操作")
  //   return false
  // }
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@current@map", remark: "current_map", message_id: message_id }), "加载当前地图", "current_map", message_id)
  Message.loading("正在加载当前地图。。。")
  client.value.publish(topic.value, JSON.stringify({ order: "machine@current@map", remark: "current_map", message_id: message_id }));
}
//添加标注点位
const shandleOk = () => {
  svisible.value = false;
  console.log(caseForm)
  let message_id = generateUniqueKey();
  loadOrderResult(JSON.stringify({ order: "machine@set@position", params: { name: caseForm.name, type: caseForm.type, pose: JSON.parse(caseForm.pose) }, remark: "set_position", message_id: message_id }), "设置地图标注点", "set_position", message_id)
  Message.loading("正在加载当前地图。。。")
  client.value.publish(topic.value, JSON.stringify({ order: "machine@set@position", params: { name: caseForm.name, type: caseForm.type, pose: JSON.parse(caseForm.pose) }, remark: "set_position", message_id: message_id }));
  // saveDevicePosition(caseForm)
};
//定时巡航ok
const thandleOk = () => {
  Message.loading("正在开启定时巡航")
  tvisible.value = false;
  controTime()
};

//保存标注点入库
const saveDevicePosition = () => {
  systemDevicePosition.save(caseForm).then(res => {
    caseForm.web_pose = JSON.parse(caseForm.web_pose)
    state.dayRecory.push(caseForm)
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })
}
const shandleCancel = () => {

  svisible.value = false;

}

//关闭定时巡航按钮
const thandleCancel = () => {

  currentDeviceCase.value = null

  warnPointInfo.value = null

  console.log(currentDeviceCase.value)

  tvisible.value = false;

}
const handleOk = () => {
  if (client.value) {
    client.value.end();
    isLine.value = 0
    Message.error(curDevieInfo.value.device_name + '断开连接')
  }
  visible.value = false;
};
const handleCancel = () => {
  if (client.value) {
    client.value.end();
    isLine.value = 0
    Message.error(curDevieInfo.value.device_name + '断开连接')
  }
  visible.value = false;
  CaseList.value = null

  currentDeviceCase.value = null
  baseinfo.weizhi = ""
  baseinfo.battery = 0
  baseinfo.dmode = ""
  baseinfo.emergencyButton = ""
  baseinfo.charge = "未充电"
  currentMapInfo.name = ""
  currentMapInfo.alias = ""
  currentMapInfo.width = ""
  currentMapInfo.height = ""
  currentMapInfo.image_url = ""
  currentMapInfo.origin_x = 0
  currentMapInfo.origin_y = 0



  //清除地图缓存
  tool.local.remove(curDevieInfo.value.device_num + ":current_map")

}
const handleOkb = () => {
  endPosition.value = null
  bvisible.value = false;
};
const handleCancelb = () => {
  endPosition.value = null
  bvisible.value = false;
}
//双击显示标注点
const handleDblClick = (event) => {
  // Message.success("11111")
  svisible.value = true
  getDeviceCaseList()
  diffMapMath(mousePosition.x, mousePosition.y, currentMapInfo.origin_x, currentMapInfo.origin_y, currentMapInfo.height)
  caseForm.web_pose = JSON.stringify(mousePosition)
  caseForm.device_num = curDevieInfo.value.device_num
}


const beforeOk = (done) => {
  if (caseForm.name == "") {
    Message.error("请输入点位名称")
    return false
  }
  if (caseForm.type == "") {
    Message.error("请选择点位类型")
    return false
  }
  if (caseForm.case_id == "") {
    Message.error("请选择巡逻方案")
    return false
  }
  done()

}
const beforetOk = (done) => {
  if (!currentDeviceCase.value) {
    Message.warning("没有选择巡航方案")
    return false
  }
  if (!navCollect.value) {
    Message.warning("没有点位无法巡航")
    return false
  }

  done()

}

//选择巡航方案
const handleSelect = (value, type = "") => {
  console.log(value)
  caseForm.case_id = value
  //获取巡航方案
  getDeviceCaseByID(value)

  getPositionList(curDevieInfo.value, value, type)
}

//选择巡航方案2
const handleSelect2 = (value) => {
  console.log(value)
  caseForm.case_id = value
  //获取巡航方案
  getDeviceCaseByID(value)

  getPositionList(curDevieInfo.value, value, "normal")
}

const getDeviceCaseByID = (case_id) => {
  systemDeviceCase.read(case_id).then(res => {
    if (res.success) {
      currentDeviceCase.value = res.data
    }
  }).catch(e => { console.log(e) })


}

//摄像监控
const SXhandleOk = () => {

  SXvisible.value = false;
};
const SXhandleCancel = () => {

  SXvisible.value = false;
}

//打开视频流

const openCama = (record) => {
  vedio_visible.value = true
  currentBindDevice.value = record
  //请求视频流

  commonApi.haikangSign({ code: record.device_num }).then(res => {
    console.log(res)
    if (res.data.url) {
      video_url.value = res.data.url
    } else {
      Message.error("没有视频流信息")
    }

  }).catch(e => { console.log(e) })


}
const vedio_handleOk = () => {

  video_url.value = null
  vedio_visible.value = false;
};
const vedio_handleCancel = () => {
  video_url.value = null
  vedio_visible.value = false;
}
//查看预警点信息
const viewWarnInfo = (position, warn_point) => {
  warn_visible.value = true
  returnWarnInfo(warn_point)
  warnPointInfoView.value = position
  //加载摄像设备监控数据
  systemDeviceBind.getList({ device_id: curDevieInfo.value.id }).then(res => {
    console.log(res)
    deviceBindList.value = res.data.items
    res.success && Message.success(res.message)
  }).catch(e => { console.log(e) })

}

const warn_handleOk = () => {


  warn_visible.value = false;
};
const warn_handleCancel = () => {

  warn_visible.value = false;
}
//打开实时导航监控面板
const monkaibel = (deviceInfo) => {





}

defineExpose({ open })
</script>

<style scoped>
::v-deep .loading[data-v-287350ba] {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 95%;
  height: 95%;
  background-color: #000000b5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBOX {
  width: 100px;
  height: 100px;
  border: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  caret-color: transparent;
}

.ma-icon-position {
  font-size: 12px;
}

.hide-cursor {
  caret-color: transparent;
  pointer-events: none;
  tabindex: -1;
}

.circle-box {

  margin-top: 20px;
  margin-left: 20px;
}

.control-c {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
  border: solid 2px #0a0a0a;

}

.control-left {
  width: 202px;
  height: 202px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
  border: solid 2px #1b1b1b;
}

.cross-c {
  width: 137px;
  height: 137px;
  display: flex;
  flex-wrap: wrap;
  transform: rotate(45deg);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -70px;
}

.cross-item {
  width: 68px;
  height: 68px;
  cursor: pointer;
  position: relative;
  border: 1px solid black;
}

.center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -19px;
  margin-left: -19px;
  border-radius: 24px;
  width: 40px;
  height: 40px;
  border: solid 2px #0a0a0a;
  background: #0a0a0a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arr {
  width: 0;
  height: 0;
  border: solid 4px transparent;
  border-bottom-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
}

.arr-1 {
  margin-top: -7px;
  margin-left: -7px;
  transform: rotate(-45deg);
}

.arr-2 {
  margin-top: -8px;
  margin-left: -4px;
  transform: rotate(45deg);
}

.arr-3 {
  margin-top: -3px;
  margin-left: -7px;
  transform: rotate(-135deg);
}

.arr-4 {
  margin-top: -3px;
  margin-left: -1px;
  transform: rotate(135deg);
}

.c-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container[data-v-287350ba] {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background-color: black;
  margin-top: 10px;
  height: 380px;
  /* width: 810px; */
}

.ma_item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
}

.ma_item_right {
  margin-left: 20px;
}


.button {
  color: aqua;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  margin: 10px auto;

  border-radius: 10px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  z-index: -2;
  animation: 2s rotation linear infinite;
  transform-origin: left top;
}

@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

.button::after {
  content: '';
  position: absolute;
  --g: 4px;
  top: var(--g);
  left: var(--g);
  width: calc(100% - var(--g)*2);
  height: calc(100% - var(--g)*2);
  background-color: #000;
  z-index: -1;
  border-radius: inherit;
}

.round-connect {
  height: 15px;
  width: 15px;
  background-color: #14f21d;
  border-radius: 100%;
  animation: twinkle 0.6s infinite alternate;
  margin-top: 9px;
  animation: twinkle 0.5s infinite alternate;
}

.round {
  height: 15px;
  width: 15px;
  background-color: red;
  border-radius: 100%;
  animation: twinkle 0.6s infinite alternate;
  margin-top: 9px;
  animation: twinkle 0.5s infinite alternate;
}

@keyframes twinkle {
  0% {
    opacity: .0.8;
  }

  100% {
    opacity: 0;
  }
}

/* 定义一个名为floating的动画 */
@keyframes floating {
  0% {
    transform: translateY(0);
    /* 初始位置 */
  }

  50% {
    transform: translateY(-4px);
    /* 向上移动4像素 */
  }

  100% {
    transform: translateY(0);
    /* 回到初始位置 */
  }
}

/* 应用动画到指定的元素 */
.element {
  animation: floating 2s ease infinite;

  /* 动画名称、持续时间、缓动函数、循环次数 */
}

.ma_position {

  width: 25px;
  height: 25px;
  position: absolute;
  /* border-radius: 50%; */
  /* background-color: red; */
  z-index: 999;
  cursor: pointer;

}






@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dbox {
  width: 50px;
  height: 20px;
  background-color: lightcoral;
  font-size: 10px;
  border-radius: 5px;
  color: #fff;
  line-height: 20px;
  overflow: hidden;
  font-weight: 600;
  background-color: rgba(247, 118, 133, 0.77);
  /* 半透明白色背景 */
}

.dbox1 {
  width: 50px;
  height: 20px;
  background-color: lightcoral;
  font-size: 10px;
  border-radius: 5px;
  color: #fff;
  line-height: 20px;
  overflow: hidden;
  font-weight: 600;
  background-color: rgba(239, 6, 34, 0.77);
  /* 半透明白色背景 */
}

.img_container {
  cursor: move;
  position: relative;

  border: 5px solid red;

}

.resize-box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
  /* 垂直居中 */
}

.bind-container {

  display: flex;
  flex-wrap: wrap;
}

.bind-box {
  width: 47%;
  /* height: 200px; */
  border: 1px solid #c4c2c2;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  box-sizing: border-box;
  box-shadow: inset 2px 2px 5px rgba(187, 185, 185, 0.5);
  margin-right: 10px;
  margin-bottom: 10px;
}

.deviceitems {
  width: 31%;

}

.bind-box2 {
  width: 95%;
  /* height: 200px; */
  border: 1px solid #c4c2c2;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 20px;
  box-sizing: border-box;
  box-shadow: inset 2px 2px 5px rgba(187, 185, 185, 0.5);
  margin-right: 10px;
  margin-bottom: 10px;
}

.bind-name {

  font-size: 12px;

}

.yellow {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f03c2b;
}

.yellow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: #e6715d;
  border-radius: 50%;
  opacity: 0.2;
  animation: breath .6s linear .5s infinite alternate;
}

@keyframes breath {
  0% {
    opacity: 0.2;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes swing {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-10deg);
  }
}

.swing-animation {
  display: inline-block;
  /* 确保元素不是块级元素 */
  animation: swing 2s ease-in-out infinite;
  /* 应用动画 */
}

.orderItem {
  display: flex;
}
</style>